현재 프로젝트의 경우 권한 관리를 recoil 로 다루고 있다. ​ Rocoil 이란? 페이스북에서 발표한 React 전역 상태 관리 라이브러리이다. usestate 만을 사용하여 상태 관리를 하게 되면 프로그램이 복잡하게 될 시, props drilling이 일어나게 되는데, Recoil은 이러한 행위를 방지하게 해준다. ​ Recoil의 경우. React 에서 사용하는 라이브러리가 아닌, 외부 라이브러리로 아래의 링크에서 내용을 확인하면 된다. Recoil A state management library for React. recoiljs.org Recoil 라이브러리에 주요한 개념으로는 Atom 과 selector가 있다. ​ Recoil 에서 하나의 전역 상태를 Atom 이라고 하는데, Atom ..

컴포넌트의 속성 값을 불러올 수도 있고, value나 style 값 같은 것들을 바꿔줄 수도 있는. DOM을 조작할 수 있게 해주는 ref. 렌더링에 필요하지 않은 값을 참조할 수 있는 ref. 에 대하여 설명하도록 하겠다. ​ ref 는 비교적 간단한 개념이므로 forwardRef 와 useImperativeHandle 를 설명하기 위한 도약 단계처럼 가볍게 짚고 넘어가도록 하겠음. ​ 덧붙히는 말.. 모 부장의 "Ref 는 React 생명주기와 어울리지 않는 문법으로 React 상에서도 지양해야 한다"는 발언에 대하여 설명하도록 하겠다. Ref 를 무분별하게 선언하고, 다른 문법으로 대체가 가능한데도 불구하고 무지성으로 사용하는 것이 문제. (이것은 다른 문법도 동일하다. 각자가 가지는 고유의 특성을..

UseEffect 란. 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook임. ​ 기존에는 클래스형 컴포넌트에서만 생명주기 메소드를 사용할 수 있었는데. useEffect를 쓰면 함수 컴포넌트에서도 side effect 를 쓸 수 있게 되었다. 라이프사이클 hook(componentDidMount, componentDidUpdate, componentWillUnMount)을 대체할 수 있는 useEffect. 사용 방법 import { useEffect } from 'react'; function useeffecttest() { // 사용법 1. 종속성 매개변수 없음. useEffect(() => { DoSomething(); }); // 사용법 2. 빈 종속성 매개변수 ..

리액트 16.8 버전 이전에서는 함수형 컴포넌트에서 상태 관리를 할 수가 없었음. (컨버팅 하는 사람도 보았다..) 하지만 16.8 버전 부터 Hooks 라는 기능이 도입되며 함수형 컴포넌트에서 상태를 관리할 수 있게 되었다.! ​ ※ Hook : 함수 컴포넌트에서 React state (리액트에서 아주 중요한 개념 중 하나) 와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수. ※ 상태관리(State Management) : 데이터를 관리하는 방법. 여러 component 간에 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것을 의미. ​ 리액트로 개발을 하다보면 usestate 를 적절한 위치에서 선언하고, 잘 내려주고(상속) 꼬이지 않도록 관리하는 것이 고오급 스킬..