리액트

React Hooks useEffect

프로젝트 진행 중 모달 창에서 선택된 탭의 ID에 따라 부모 페이지로 다른 데이터를 전달해야 했다. useEffect에 대한 정확한 이해 없이 사용했더니 항상 고정된 값이 전달되거나(dependency를 설정하지 않았기 때문) 다른 모달을 선택해도 이전의 값이 전달(useEffect를 이용한 초기화를 하지 않음)되는 등의 문제가 생겼다. 이 기회에 정확하게 정리하고 넘어가려고 한다. React Hooks에서 useState와 더불어 가장 많이 사용하는 useEffect다. useEffect는 렌더링이나 특정 값이 달라지는 이벤트가 발생하면 그것을 인지하고 업데이트 해주는 함수다. 앞서 설명했듯이 useEffect는 크게 다음과 같은 조건에 의해 작동한다. 페이지가 처음 렌더링 됐을 때 (렌더링 시 무조건..

React 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

리액트를 사용하다 보면 컴포넌트 간에 데이터를 전달할 일이 많이 생긴다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 다음과 같이 props를 이용해 간단하게 전달할 수 있다. // 부모 -> 자식 예시 그러나 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때는 useState로 setter를 설정해 setter를 전달해주는 일련의 과정이 필요하다. 과정은 다음과 같다. 부모 컴포넌트에서 useState를 통해 전달받을 데이터를 저장할 변수와 setter를 선언한다. 자식 컴포넌트에 props로 setter를 전달한다. 자식 컴포넌트에서는 props.setter를 이용해 데이터를 저장한다. // 부모 컴포넌트 // 자식 컴포넌트 ... onChange={(i) => props.setId(d..

React 파일 구조 세팅 (+ VSC ES7 React/Redux/GraphQL/React Native snippets)

기본 로그인 기능을 보일러플레이트(Boiler Plate)로 만들기 위해 리액트 앱을 만든 후 파일 구조를 세팅했다. (보일러플레이트: 자주 쓰이는 기능을 재사용할 수 있게 만들어 놓은 후 재사용하는 코드) 처음 create-react-app을 이용해 리액트 앱을 만들면 다음과 같은 파일 구조가 생성된다. 개발은 주로 src 폴더에서 진행된다. public 폴더에 저장된 파일들은 퍼블릭 환경에서만 쓰일 수 있기 때문에 Webpack이 처리할 수 있도록 src에 파일들을 저장해 주어야 한다. 로그인 보일러플레이트 만들기 src 폴더를 다음과 같이 수정한다. 테스트를 위한 App.test.js와 로고 이미지인 logo.svg를 삭제 Redux를 위한 폴더인 _actions와 _reducer 생성 compon..