devstudylog

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.useEffect는 component가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있다.즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다! => useEffect(effect function, dependency array); 1. mount 됐을 때 useEffect 실행 시점useEffect는 컴포넌트가 mount, update, unmount '될 때' 실행 된다.=> useEffect의 실행은 컴포넌트의 렌더링과 동시에 일어나는 것이 아니라 그 후에 일어난다.  ❓useEffect의 m..

왜 useEffect 일까?useEffect에서 "effect"가 의미하는 바는 무엇일까.effect는 side effect 라는 함수형 프로그래밍 용어를 나타낸다.side effect가 무엇인지 이해하려면 순수 함수의 개념을 이해 해야 한다. 대부분의 React 컴포넌트는 순수 함수로 만들어져 있다.function MyReactComponent(){}순수 함수 (pure function)1. 함수의 return 값이 동일한 인수 (argument)에 대해 동일하다.2. side effect가 없다. (외부의 상태를 변경하지 않는다) 대부분의 React 컴포넌트는 순수 함수이다. 즉, input을 받아 예측 가능한 JSX 리턴 값을 만들어 낸다.JavaScript 함수에 대한 input은 인수 (argu..

state란- state는 간단히 말해 변수이다. 하지만 const, let 등으로 선언한 변수와 다르게 값이 변하면 관련 있는 컴포넌트들이 재렌더링 되어서 화면이 바뀐다.- props와 마찬가지로 렌더링 결과물에 영향을 주는 정보를 가지고 있다.- state는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체이다. - usestate는 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 react Hook이다.- 일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState()를 활용해 state라는 저장 공간에 담아 사용한다. state를 정의할 때 중요한 점- state를 정의할 때는 렌더링이나 데이터 흐름에 사용되는 값만 state에..