React 데이터 흐름, Lifting State UP(상태 끌어올리기), side Effect

🔔React 데이터 흐름

• 리액트는 컴퍼넌트를 모았다고 생각할 수 있다. (컴퍼넌트와 props)

• 하나의 컴퍼넌트는 한가지 일만한다.
• 데이터는 위에서 아래로 흐르며 컴퍼넌트는 컴퍼넌트 바깥에서 props를 이용해 데이터를 인자나 속성처럼 전달 받을 수 있다.
  - props 와 state가 혼동이 올 수 있다. (State)
• 데이터가 위에서 아래로 흐르기 때문에 데이터의 전달은 부모 컴퍼넌트가 된다. ( = 단방향 데이터 흐름(One-way data flow))

 

🔔 State 끌어 올리기 (Lifting State UP)

• 리액트의 단방향 데이터 흐름을 통해 하위 컴퍼넌트는 상위 컴퍼넌트로부터 전달 받은 데이터가 어떤 형태인지 알 수 있다.
• 하위 컴퍼넌트에서 특정 이벤트로 인해 상위 컴퍼넌트의 상태가 바뀌는 것은 '역방향'으로 진행이 된다고 볼 수 있다.
• 그래서 상위 컴퍼넌트의 "상태를 변경하는 함수" 자체를 하위 컴퍼넌트로 전달, 이 함수를 하위 컴퍼넌트에서 실행한다.
  = 상태 끌어올리기

 

🔔 Side Effect

• 순수함수 = 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수(함수 외부의 값에 영향을 주면 순수함수 X)
• 실행 조건 = 컴퍼넌트가 렌더링 될때 실행이라고 생각하면 된다.
  - 컴포넌트 생성 후 처음 화면에 렌더링
  - 컴퍼넌트에 새로운 props가 전달 되며 렌더링
  - 컴퍼넌트에 상태(state)가 바뀌며 렌더링
• useEffect (함수,[]) - 처음 컴퍼넌트가 생성 될때만 생성
• useEffect (함수,[something]) - something이 실행 될때마다 생성
• useEffect (함수) - 계속 실행된다고 생각한다(why? 직접해본 결과 계속 생성(확실한 정보는 아니다.))