-
Class Component에서 빈번하게 작성하는 'this.state' 또는 'this.props'를 생략하기 위해 비구조화 할당(구조분해할당)을 사용한다.
const { value, answer } = this.state;
const { tries } = this.props; -
state 중에 함수 형태인 경우 함수 안에
this를 사용하지 않는다면 컴포넌트 밖으로 빼서 쓸 수 있다.
해당 함수가 다른 곳에서도 사용될 수 있으므로 class 밖에 작성하는 것이 좋다.
class 밖에 있으므로 독립적으로 존재할 수 있기 때문에 아무 영향이 없어 Class형의 함수를 Hooks로 바꿀 때 간편하다. -
📌 옛날 state로 현재 state를 만들 때는 ❗함수형 setState❗를 써야 한다.
ex. setState((prevState) => { })
일반setState([]);이 아니라 함수형으로 작성하기!state가 변경되는 경우 setState를 연달아서 작성함으로써 문제가 발생하지 않는다.
-
(💥주의!) render() 안에 this.setState() 사용하지 않는다!
this.setState하면 state가 변경되어 렌더링이 발생하여 무한 반복❌으로 렌더링되는 문제가 발생된다. -
자식 컴포넌트에서는 부모 컴포넌트에서 받은 props를 직접 바꿀 수 없고, 부모 컴포넌트에서만 바꿀 수 있다.
자식이 props를 바꿔버리면 부모에게 영향을 미치는 문제가 발생한다. -
부모로 받은 props를 자식 컴포넌트에서 바꾸고 싶은 경우 props를 state로 만들어 state를 변경한다.
(좋은 구조는 아니라서 권장하지 않지만 실무에서 사용할 수 있는 방법)
