useRef란? 간단하게 말해서 .current 속성에 변경 가능한 값을 담고 있는 상자이다. 그래서 ref는 state와 비슷하게 어떤 값을 저장하는 저장 공간으로 사용될 수 있고 ref를 통해 DOM요소에 접근해서 여러 가지 일들을 할 수 있다. useRef의 특성 1. useRef는 렌더링을 발생시키지 않는다. State는 변경되면 자동으로 컴포넌트가 다시 랜더링이 된다. 하지만 Ref는 변경되어도 컴포넌트는 다시 렌더링 되지 않는다. 따라서 State 대신 Ref를 사용하면 불필요한 렌더링을 막을 수 있다. 2. 컴포넌트가 렌더링이 되어도 Ref 안에 저장되어 있는 값은 변화되지 않고 그대로 유지가 된다. 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안 되는 값을 다룰 때 유용하게 사용할..
useEffect란? 어떤 컴포넌트가 Mount 되었을 때, Update 될 때, UnMount 되었을 때 특정작업을 처리할 코드를 실행시킬 때 사용한다. React 컴포넌트의 Lifecycle Mount (화면에 나타나는 것) -> Update (업데이트, 리렌더) -> UnMount (화면에서 사라지는 것) React Component Lifecycle Methods 출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React는 기본적으로 Lifecycle마다 실행할 수 있는 Method를 가지고 있다. 하지만 이 Method들은 Class형 컴포넌트에서 만 사용할 수 있다. 함수형 컴포넌트에서는 사용할 방법이 없을까? 바로 Re..
state state는 컴포넌트가 가질 수 있는 상태이다. useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트시킬 수 있는 도구를 제공해 준다. const [state, setState] = useState(초기값); state : 현재 상태 값 setState : state를 변경시켜 주고 싶을때 함수를 이용해서 간편하게 변경시켜줄 수 있다. state를 직접 변경하면 안 되는 이유 state의 변경 전과 후의 메모리 주소 비교를 통해 state의 변경을 확인하고 렌더링을 하게 되는데 state를 바로 수정하면 값은 바뀌지만 메모리 주소는 변함없기 때문에 렌더링을 하지 않는다. 현재 state와 setState를 비교하여 값이 다를 때 render 함수를 호출한다. 그래서 state를 바로 ..
