react.js (5) 썸네일형 리스트형 [React] Context 란? [Context의 배경] 일반적으로 리액트에서 컴포넌트 간 데이터 공유가 필요할 때는 state를 통해서 값을 자식 노드가 부모 노드로 올리고 props를 통해서 값을 부모 노드에서 자식 노드로 전달된다. 아래의 그림의 경우에는 1번 노드에서 5번 노드까지 값을 전달하기 위해서 1,2,3,4,5번 노드를 차례로 거치면서 값을 props를 통해서 전달해야한다. 그런데 만약 로그인된 사용자의 정보와 같이 여러 컴포넌트들에 전달해줘야 하는 props의 경우 이 과정이 꽤나 번거로울 것이다. (prop drilling) 이때 사용할 수 있는 것이 context이다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 이렇게 되면 불필요한 re-r.. [React] useState와 useReducer useState와 useReducer 모두 리액트 상태 관리 방법이다. 그렇다면 왜 굳이 useState를 두고 useReducer를 추가로 사용하는 것일까? [useReducer의 장점] - 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있다. -> 여러 컴포넌트에서 재사용이 가능하다. -> 컴포넌트와 상태 관리를 분리해서 관리가 가능하다. -> 한 번 작성하고 여러 군데서 가져다가 쓸 수 있기 때문에 useState를 여러번 쓰지 않아도 된다. -> 데이터 상태 관리 포인트가 한군데라 유지 보수가 용이하다. 그렇다면 무조건 useReducer를 쓰는게 이득일까? 아니다. 하나의 컴포넌트에서만 쓰는 값이 있다면 useState가 적절하며, 여러군데에서 쓰이는 값이라면 useReducer가 적절하다. .. [React] 불변성(Immutability) 불변성: 변하지 아니하는 성질 리액트를 얕은 비교를 수행하기 때문에 객체 속에 있는 데이터를 하나하나 다 비교하지 않는다. 다만 값의 참조값만 비교할 뿐니다. 예시를 통해 알아보자. 아래와 같이 person이라는 객체가 있다고 하자. const person = { name: 'John', age: 32, address: 'Seoul' }; person의 age를 변경하고 싶을 때 왜 아래 1번이 아닌 2번을 이용해서 굳이 state를 변경해줘야 하는 것일까? 1) person.age = 42; 2) setPerson({...person, age: 42}); 1번과 같이 진행한다면 화면 상에서 값의 변화가 일어나지 않을 것이고, 2번과 같이 진행한다면 예상대로 화면 상에서 값의 변화가 보일 것이다. 그 이.. [ETC] Netlify 배포 시 exit code: 2 CI 옵션 npx create-react-app를 사용하여 만든 리액트 프로젝트를 Netlify를 통해서 배포할 때 아래와 같은 메시지와 함께 빌드가 실패했다. Failed during stage "building site": Build script returned non-zero exit code: 2 Build failed due to a user error: Build script returned non-zero exit code: 2 Failing build: Failed to build site 에러 메시지에서 조금 더 위에 있는 빌드 로그를 보면 아래와 같이 process.env.CI = true가 되어있어서라고 나온다. 배포 시에 환경변수 설정에서 CI를 false로 설정하고 다시 배포를 해보면 정상적.. [React] React JS 란? 공식 페이지: https://react.dev/ React The library for web and native user interfaces react.dev [React] - UI를 만들기 위한 자바스크립트 라이브러리 - 컴포넌트들로 구성된 그룹 - 컴포넌트를 만들 시에 각 컴포넌트는 독립적이며, 재사용성이 높게 설계해야함 - 값의 상태가 변경될 때 화면이 re-rendering 됨 -> state: 컴포넌트 내부에서 수정 및 사용되는 값 -> props: 컴포넌트 외부에서 주입되어 사용되는 값 - re-rendering 시에는 실제로 변경이 필요한 부분만 업데이트 됨 - Virtual DOM Tree를 사용하기 때문에 전체 트리가 아닌 실제로 변경이 필요한 노드만 업데이트 됨 - Virtual DO.. 이전 1 다음
