useEffect란?
랜더링이 될 때마다 실행하는 함수이다.
종속성배열 값이 변할 때, 첫번째 인자의 함수가 실행된다.배열 내의 어떤 값이 변할 때에만 함수가 실행된다.
useEffect가 실행되는 3가지
1) 컴포넌트가 처음 생성
2) props가 업데이트
3) state(상태)가 업데이트
side effect를 관리할 때 쓰면 좋다. side effect가 일어나는 경우
1) console.log()
2) Element.addEventListener
3) Math.random
4) Date.now
5) ajax 등등
프론트엔드에서는 side effect 없이 개발하기 힘들지만, 백엔드에서는 지양해주는게 좋다.
useEffect(() => {})
// state, props 번경시마다 작동useEffect(() => {},[])
// 최초 1회 컴포넌트 랜더링시 작동두 번째 인자가 빈배열이라면 컴포넌트가 처음 실행될 때 딱 한번만 실행되는데
// 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때에 사용할 수 있다.useEffect(() => {}, [hello])
// hello 변경 시 작동단방향 데이터 흐름을 사용하지 않으면, 그때그때 기능 변경 사항에 대하여 코드를 계속 작성해야 한다.
그러면 코드의 흐름을 알기 어렵고, 복잡해진다.
단방향 데이터 흐름을 적용하면 컴포넌트의 중요한 상태만 잘 관리한다면 아래서 UI가 자동으로 변경된다.
lifting state up이 먼저인가?
브라우저에서 이미 다 랜더링이 마쳐진 화면이 있고, 하위 컴포넌트에서 이벤트가 발생했을때, state변화가 필요하다.
그 경우에 lifting state up을 한다.
상태 끌어올리기가 먼저 되고 그 이후에 단방향으로 데이터가 전달된다.
