썬키의 개발노트

// JSX return ( ) 만약, 위와 같은 코드가 존재한다고 가정했을 때 입력한 데이터를 submit 하기 전에 실행해야 할 프로세스들이 있다고 한다면 어떻게 해야 될까? const submit = (e) => { e.preventDefault() }; 바로 submit 함수를 하나 만들어주고, form 태그에는 onSubmit={submit} 과 같이 입력하면 된다. 이 함수의 구현부를 살펴보면, preventDefault() 라는 함수가 존재하는데 이번 포스트에서는 이 함수에 대해 간략하게 기술해보려고 한다. preventDefault() form 태그에는 submit 버튼이 무조건 존재하기 마련이다. 이 버튼을 클릭하게 되면 브라우저는 기본적으로 폼을 제출하고 페이지를 새로고침하는데 이 때 ..

위와 같이 아이디, 제목, 내용을 입력하고 등록버튼을 누르면 작성한 데이터들을 서버로 전달하는 하나의 폼이 있다고 가정하자. 원초적인 방법으로는 각 입력 태그마다 name이라는 Attribute를 부여해서 값을 전달했는데 React에서는 FormData 라는 객체를 이용해서 서버로 데이터를 전달할 수 있다. 그래서, 이번 포스트에서 다뤄볼 내용은 다수의 데이터들을 서버에 전달할 때 어떻게하면 쉽고 간단하게 비동기 방식으로 처리할 수 있을까에 대한 내용이다. FormData FormData 객체는 폼 요소들의 값을 쉽게 저장하고 서버에 전송할 수 있는 방법을 제공한다. 파일 업로드와 같은 복잡한 데이터를 처리할 수 있다는 장점이 있다. 사용법 // FormData 객체 생성 let formData = ne..

Axios Axios는 React에서 자주 사용되는 HTTP 클라이언트 라이브러리 중 하나이다. (* HTTP 클라이언트 라이브러리 : 서버로부터 데이터를 가져오는데에 사용) Axios를 이용해 서버에 데이터를 요청하고 받을 수도 있고, 서버에 데이터를 보낼 수도 있다. Axios의 장점 Axios는 비동기 HTTP 통신을 수행하는 라이브러리 중 하나이다. 비동기 통신은 요청을 보내고 서버로부터 응답을 받을 때, 프로그램의 실행 흐름을 차단하지 않고, 다른 작업을 수행할 수 있도록 한다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있다. 기본 문법 // GET 요청을 보냅니다. axios.get(url[, config]) // POST 요청을 보냅니다. axios.post(url[, data[, c..

SessionStorage, localStorage 순수 JS로 세션에 값을 저장하기 위해서 sessionStorage 또는 localStorage와 같은 함수를 사용했었는데 react로 프로젝트를 진행할 때는 react 모듈로 session, cookie에 값을 저장할 수 있어야 한다. TO-DO 1. npm을 이용해 react-session-api(세션) / react-cookie(쿠키) 설치 2. 값이 잘 저장 되는지 확인 npm react-session-api / npm react-cookie 위와 같이, 터미널에서 해당 프로젝트 경로에서 npm 명령어를 입력한다. 쿠키를 이용하려면 react-cookie, 세션을 이용하려면 react-session-api를 입력하면 된다. 1. Session 문..

useEffect React에서는 컴포넌트가 mount(화면에 나타남), unmount(화면에서 사라짐), 업데이트 될 때마다 실행되는 코드를 작성할 수가 있는데 이를 효율적으로 관리하기 위해 useEffect라는 hook을 제공한다. 예를 들어, 게시물을 보여주는 컴포넌트가 있다고 가정하였을 때 이 컴포넌트가 처음으로 mount될 때 게시물 데이터를 가져와서 화면에 보여주어야 하는데 이 때 useEffect를 사용하면 컴포넌트가 처음으로 mount될 때 게시물 데이터를 가져오는 코드를 실행할 수 있다. 또 다른 예로는, 사용자가 검색어를 입력했을 때 검색 결과를 가져오는 컴포넌트가 있다고 가정하자. 이 때, useEffect를 사용하면 검색어가 변경될 때마다 다른 검색 결과를 가져오는 코드를 실행할 수..