리액트로 생각하기
컴포넌트 구조 나누기
리액트를 이용한 개발 방식의 특징은 페이지 단위가 아닌
컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다.
우선 컴포넌트를 만들고 이를 조립해 나가는 방식으로 개발을 하게 되는데
이러한 방식을 상향식(bottom-up)으로 만든다고 이야기 한다.
이런 개발 방식의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다는 것이다.
프론트 엔드 개발자로서 PM 또는 UX 디자이너로부터 앱의 디자인을 전달 받으면
이를 컴포넌트 계층 구조로 나눈것이 가장 먼저 해야할 일이다.
컴포넌트를 나눌때에 중요한 점은 단일 책임 원칙에 따라
하나의 컴포넌트는 한가지의 일만 하도록 나누는 것이다.
데이터는 위에서 아래로 흐릅니다.
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치
인자(arguments) 또는 속성(attributes)처럼 전달 받는다.
다만 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 알지 못한다.
데이터를 전달하는 주체는 부모 컴포넌트가 된다.
이런 데이터 흐름을 하향식(top-down)이라고 부른다.
이 원칙은 리액트의 대표적인 키워드로 설명되는
단방향 데이터 흐름(one-way data flow)이라고 한다.
데이터 정의
state가 많아질수록 애플리케이션이 복잡해진다.
props와 state 중 어떤 데이터를 props로 두어야 할까?
- 부모로부터 props를 통해 전달된다. (이 경우 확실히 state가 아니다)
- 시간이 지나도 변하지 않는다. (이 경우 확실히 state가 아니다)
- 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능하다. (이 경우 state가 아니다)
위 세가지 조건이 성립한다면 그 데이터는 props이다.
state의 위치
하나의 state를 기반으로 두 컴포넌트가 영향을 받는다면
이때에는 공통 소유 컴포넌트를 찾아 그 곳에 state를 위치해야한다.
두개의 자식 컴포넌트가 하나의 state에 접근하고자 할 때에는
두 자식의 공통 부모의 컴포넌트에 state가 위치해 있어야 한다.
역방향 데이터 흐름
state 위치를 전부 정하고 난 후, 부모 컴포넌트에서의 state가
하위 컴포넌트에 의해 변하는 경우가 발생할 수 있다.
예를들면, 버튼을 통한 이벤트등은 부모의 state를 변화시켜야 한다.
이런 경우 state를 변경시키는 함수(handler)를
하위 컴포넌트에 props로 전달해서 해결할 수 있다.
이것이 바로 state 끌어올리기(Lifting State Up)이다.
state 끌어올리기(Lifting State Up)
import React from "react";
export default class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "Change me!"
};
this.handleChangeValue = this.handleChangeValue.bind(this);
}
handleChangeValue() {
this.setState({
value: "CHANGE!"
});
}
render() {
return (
<div>
<div>Value is {this.state.value}</div>
<ChildComponent />
</div>
);
}
}
function ChildComponent() {
const handleClick = () => {
// 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
};
return <button onClick={handleClick}>Change</button>;
}위 예제에서 state를 변경하는 함수는 handleChangeValue이다.
setState()를 통해 값을 변경하려 한다.
데이터 전달은 props를 이용한다. props 이름을 적절하게 지어주자
하위 컴포넌트가 버턴 클릭 이벤트에 따라 state를 변경하려고 하므로
이름을 handleButtonClick이라고 지어주자
class ParentComponent extends React.Component {
//... 생략 ...
handleChangeValue() {
this.setState({
value: "CHANGE!"
});
}
render() {
return (
<div>
<div>Value is {this.state.value}</div>
<ChildComponent handleButtonClick={this.handleChangeValue} />
</div>
);
}
}ChildComponent는 마치 고차함수가 인자로 받은 함수를 실행하듯
props로 전달받은 함수를 컴포넌트 내에서 실행할 수 있게 된다.
위 예제에선 handleChangeValue가 버튼을 클릭할 때 실행되기를 원하므로
해당 부분에 콜백 함수를 실행해주면 된다.
function ChildComponent({ handleButtonClick }) {
const handleClick = () => {
// 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
// 인자로 받은 state 변경 함수를 실행한다
handleButtonClick()
};
return (
<button onClick={handleClick}>Change</button>;
)
}설정할 값을 콜백 함수의 인자로 넘길 수도 있다.
class ParentComponent extends React.Component {
//... 생략 ...
handleChangeValue(newValue) {
this.setState({
value: newValue
});
}
//... 생략 ...
}
function ChildComponent({ handleButtonClick }) {
const handleClick = () => {
handleButtonClick('넘겨줄 값 입력')
};
return (
<button onClick={handleClick}>Change</button>;
)
}