React 상태 끌어올리기
프론트엔드 개발관련 공부내용을 기록하는 포스트 입니다.
1. 개요
React에 대해서 공부하던 중 컴포넌트 설계 시 State를 어디서 관리해야 해야 하는가? 에 대해서 간략하게 정리해보고자 한다.
우리가 각 기능별 Component를 나누고자 할때 실제 각 기능별 Component에서 state를 관리하게 되면 한가지 문제점이 발생한다.
한가지의 기능 예를들어 검색창에 대한 Component를 만든다고 가정하자.
import React from "react";
export default class SearchForm extends React.Component {
constructor() {
super();
this.state = { searchKeyword: "" };
}
// 중략...
위 코드에서 볼 수 있듯이 해당 js파일에서 Componet 클레스를 상속받아 this.state에서 상태를 관리하게 된다.
그러나 검색창의 기능은 검색시 결과를 보여주는것이다.
그렇게 되면 searchKeyword에 대한 현재의 상태 값은 다른 외부에서 해당 값을 조회하거나 변경할 방법이 사라지게 된다.
props로 전달한 CallBack함수에 인자로 전달하여 간접적으로(?) 조회할 수 는 있지만 직접적으로 해당 값을 변경할 방법은 없다.
하지만, 검색어(SearchKeyword)는 다른 기능과 연계된 요구사항이 많은데 이를 변경할 수 있는 방법이 없다는 것은 문제가 될 수 있다.
예를들어, 최근 검색어를 클릭했을때 검색창에 searchKeyword값이 사용자가 선택한 값으로 변경이 되어야 하지만 이러한 상태면 변경이 불가능 하다는 것이다.
이렇게 어떤 데이터(상태값)을 여러 Component(기능)에서 의존하는 경우에는 가장 가까운 Parents Component로 state를 끌어 올리는 것이 좋다
참조 사이트 : https://ko.reactjs.org/docs/lifting-state-up.html
따라서 이러한 경우에는 아래와 같이 설계를 변경하는 것도 방법이다.
// App.js
export default class App extends React.Component {
constructor() {
super();
this.state = {
searchKeyword: "",
// TODO
};
}
// 중략...
render() {
// 중략...
return (
<>
<Header title="검색" />
<div className="container">
<SearchForm
value={searchKeyword}
onChange={(value) => this.handleChangeInput(value)}
onSubmit={() => this.search(searchKeyword)}
onReset={() => this.handleReset()}
/>
{/* TODO */}
</div>
</>
);
}
}
App.js에서 seachKeyword라는 상태를 관리하고 SearchForm에 props를 통해 전달해 주는 방식이다.
이때 SearchForm은 상태관리를 하지 않기 때문에 함수 컴포넌트로 만드는 것도 가능하다.
Gatsby router 활용에 대한 포스트 입니다.