변경된 것을 적용하기 위해서는 바뀔 때마다 root.render()를 호출해야 함
→ 개발자 입장에서.. root.render()는 한 번만 쓰고 업데이트 할 수는 없을까?
변경되어 적용될 값들을 state로 지정
이 state를 변경할 때는 다른 일반 변수들처럼 값을 대입하면 안되고
setState같은 메소드를 호출하여 변경하여야 하는데 이때 자동으로 re-rendering이 이루어짐(rendering 되기 전에 호출되는 shouldComponentUpdate()
의 값이 true 가 나오도록)
클래스 형은 아래와 같이 this.state에 state로서 사용할 값을 객체의 프로퍼티로
class Custom extends React.Component {
constructor() {
super();
this.state = {
'greet' : 'hi'
};
}
this.setState('hello');
}
함수형은 Hooks의 useState를 사용
const Custom = () => {
const [greet, setGreet] = useState('hi');
setGreet('hello');
};
원래 함수형은 state를 사용할 수 없고 이에 따라 lifecycle에 관련된 작업도 할 수 없는 오로지 모양만을 위한 컴포넌트였는데
Hooks로 사용할 수 있게됨
공식 문서에서 두 컴포넌트 모두 지원할 것이지만 hooks를 사용하는 것을 권장하고 있음
this.setState('안녕');
console.log(this.state.greet); // hello
mount - update - unmount
컴포넌트가 처음 등록될 때 - 컴포넌트를 업데이트 할 때 (re-rendering) - 컴포넌트가 사라질 때
이 함수들은 React.Component
의 메소드
따라서 이를 상속받는 클래스형 컴포넌트들은 관련 라이프 사이클 함수를 오버라이딩해서 각각의 순간에 해야할 작업들을 지정해줄 수 있음
서로가 뭔지는 별로 안 궁금하고, 각 컴포넌트의 state는 모두 독립적
→ 이런 독립성이 리액트 컴포넌트의 장점
그래도 props 를 통해 값을 위에서 아래 방향으로 전달하는 것은 가능한데
아래에서 위로 값을 전달할 수는 없을까?
→ 유사 해결책이 있는데 직접적으로 값을 전달한다기 보다 상위 컴포넌트의 값을 수정하는 함수를 넘겨주고
이를 이용하여 하위 컴포넌트에서 연산을 하게 되면 상위 컴포넌트의 값을 바꿀 수 있음
const Parents = () => {
const [value, setValue] = useState('값');
return (
<Child func={setValue} />
);
};
또는 context, Redux 등등을 사용할 수도 있음