5주차가 되면서 개발 심화로 들어왔다
악으로 깡으로
알고있는가? (Living Point💡)
React는 일반적으로 단방향 데이터 흐름을 따른다.
이러한 원칙에 따라 React의 하위 Component는 상위 Component로 부터 전달받은 데이터가 무엇인지 알 수 있다.
하지만 기능을 개발하다 보면 데이터가 아래에서 위로 전달되어야 할 때가 분명 존재한다.
비록 React는 위에서 아래로 흐르는 데이터 전달 방식을 따르고 있지만 아래에서 위로 데이터를 전달 할 수도 있다.
그 방법이 바로 Lifting State Up이다.
간단하게 얘기하면 React의 컴포넌트에 "상태를 변경하는 함수"를 props로 전달하고, 이 함수를 하위 컴포넌트에서 실행시킴으로써 상위 컴포넌트의 state데이터를 변경한다.
🧐 아래의 주석을 보면서 실제로 어떻게 쓰이나 알아보자
이것은 과제로 받은 React Component의 일부이다.
위에서 설명한 내용은 search함수와 Search컴포넌트 주석을 보면 잘 나와있다.
다른 것 까지 같이보면 복잡하니 주석만 보자.
과제(🦞가-재)
export default function Main() {
const [condition, setCondition] = useState({
departure: 'ICN'
})
const [flightList, setFlightList] = useState(json)
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setIsLoading(true)
getFlight(condition)
.then((dataFromFetch) => {
setFlightList(dataFromFetch);
setIsLoading(false);
})
}, [condition])
//Search함수는 입력받은 departure, destination을 통해
//setCondition함수를 실행하고 condition state를 변경시킨다
const search = ({ departure, destination }) => {
if (condition.departure !== departure || condition.destination !== destination) {
console.log('condition 상태를 변경시킵니다')
setCondition({
departure: departure,
destination: destination,
});
}
}
return (
<div>
<Head>
<title>States Airline</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>
여행가고 싶을 땐, States Airline
</h1>
<Search onSearch={search} />
//이렇게 Search 컴포넌트에 onSearch라는 이름으로 search함수가 props로써 전달된다.
//전달된 search함수는 Search컴포넌트 내에서 실행이 가능하며
//Search컴포넌트 안에서 실행된 search함수는 Main컴포넌트의 state를 변경시킨다(Lifting State Up).
<div className="table">
<div className="row-header">
<div className="col">출발</div>
<div className="col">도착</div>
<div className="col">출발 시각</div>
<div className="col">도착 시각</div>
<div className="col"></div>
</div>
{isLoading ? <LoadingIndicator /> : <FlightList list={flightList} />}
</div>
<div className="debug-area">
<Debug condition={condition} />
</div>
</main>
</div>
)
}⚛️ 그리고 또 배운것이 React의 useEffect기능이다
함수 내에서 어떤 구현이 외부에 영향을 미치는 경우 그 함수는 Side Effect가 있다고 한다.
React App을 만들 때 AJAX요청이 필요하거나, LocalStorage또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있다. 이러한 API는 함수 안에서 실행되면 외부와 상호작용하게 되고 이러한 상호작용이 React입장에선 모두 Side Effect인 것이다.
이러한 Side Effect를 관리해주기 위해 React에서 useEffect를 사용한다.
코드를 보며 어떻게 쓰이는지 알아보자
const [condition, setCondition] = useState({
departure: 'ICN'
})
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setIsLoading(true)
getFlight(condition)
.then((dataFromFetch) => {
setFlightList(dataFromFetch);
setIsLoading(false);
})
}, [condition])useEffect( ( ) => { }, [dependency array(조건)] )
위와같이 쓰인다. { }안에 sideEffect가 발생하는 함수들이 들어간다
위에서는 Loading화면을 보여주는 state함수랑 server에서 fetch를 통해 데이터를 받아오는 비동기 함수가 들어가 있다(외부와 상호작용).
참고로 [ ]안에는 useEffect가 실행되는 조건이 들어간다. 예를 들어, 위에서는 [ ]안에 condition이 들어감으로 condition state가 변화할 때만 useEffect함수가 실행되어 rendering되고 클라이언드와 상호작용한다.
항상 아이디어는 쉽다
시험기간📚 + 부트캠프🏕 = ☠️
