본문 바로가기

개발/react14

React 전역 상태(state) 관리 라이브러리 Recoil 전역 상태(state) 관리 라이브러리인 Recoil을 소개하고자 한다. 필요성 React는 자체적으로 component마다 state라는 변수를 활용해 자신의 상태를 관리한다. 특히, React hooks에서는 useState라는 함수를 사용하여 state를 관리한다. 한 component에서 보면 이런 state 관리가 완벽한 것 같지만, 우리는 여러 component로 web application을 만든다. 즉, component 간의 state 공유가 필요하다는 것이다. 그런데, React의 component 구조 특성상, 부모 component가 자식 component에게 state 및 정보를 전달하는 건 아래와 같이 매우 쉽다. const 부모 = (props)=>{ const [state, .. 2021. 3. 21.
리액트 컴포넌트 안 바뀜(react component not change) 결론부터 말하겠다. 새로운 key를 줘라. 예제 코드와 결과 구글 map api를 사용하는 간단한 예제이다. return props를 바꾸어 전달해도, SimpleMap 컴포넌트가 update 되지 않을 것이다. 그럼 이제 key값을 주자. 단, key는 props에 따라 변화하는 값이어야 한다. 여기서는 간단하게 위도(lat) 정보를 key값으로 주자. return 이런 현상이 일어나는 이유 react는 항상 최적화를 위해 "필요한" 부분만 업데이트한다. 그렇지 않은 부분은 기존의 그대로 둔다. 그럼 이 "필요한" 부분을 누가 판단하는가? 컴포넌트의 prop이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링 된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정합니.. 2021. 3. 4.