데이터 흐름의 이해와 비동기 요청 처리
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]
)
useEffect의 두 번째 인자인 배열(=종속성 배열)은 어떤 값의 목록이 들어감
이 값의 변경이 일어날 때가 바로 조건
종속성 배열이 빈 배열일 경우 컴포넌트가 처음 생성될 때 한번 실행되고 끝
Author And Source
이 문제에 관하여(데이터 흐름의 이해와 비동기 요청 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qjastar/3-16-데이터-흐름의-이해와-비동기-요청-처리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)