데이터 흐름의 이해와 비동기 요청 처리

김범주·2022년 3월 18일

목록 보기

11/14

React 데이터 흐름

React 개발 방식의 가장 큰 특징은 컴포넌트 단위로 시작한다는 점
컴포넌트를 만들고 만들어진 컴포넌트를 바탕으로 조립해서 페이지를 구축
└즉 상향식으로 만드는 것
컴포넌트는 컴포넌트 밖에서 props를 이용해 데이터를 전달받음
└데이터를 전달하는 주체는 부모 컴포넌트, 즉 데이터 흐름은 하향식

State & Props

State : 컴포넌트 내부에서 선언, 수정 가능
Props : 컴포넌트 외부에서 전달, 자식 컴포넌트에서 수정 불가능

부모로부터 전달되는가?
시간이 지나도 변하지 않는가?
컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가?

셋 중 하나라도 해당되면 state가 아님!

State 끌어올리기

부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 경우가 있음
상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 하위 컴포넌트에서 실행

function Parent() {
  const [value, setvalue] = useState('기본값')
  const changevalue = () => {
    setvalue('바뀐값')
  }
  
  return (
    <div>
    <ChildComponent handleButtonClick = {changevalue} />
	</div>
  )
}  
//ChildComponent에서 버튼을 클릭하면 Parent로부터 받은
//setvalue함수가 실행되어 Parent의 value 값이 변하게 됨

Effect Hook

순수 함수

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
입력으로 전달된 값을 수정하지 않음

Side Effect

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우

let word = 'side'

function effect() {
  word = 'effect'
}

effect()
//effect 함수에 의해 함수 밖의 변수 word가 변함

useEffect(function, array)

function 안에서 side effect 실행

컴포넌트가 생성 후 처음 화면에 렌더링
컴포넌트에 새로운 props가 전달되며 렌더링
컴포넌트에 state가 바뀌며 렌더링

이와 같이 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행됨

const [isloading, setisloading] = useState(false)
  useEffect(()=> {
    setisloading(true)
    getFlight(condition)
    .then(res => {
      setFlightList(res)
      setisloading(false)
    })
  }, [condition]
  )