State, LifeCycle

zmin·2022년 7월 13일
0

변경된 것을 적용하기 위해서는 바뀔 때마다 root.render()를 호출해야 함
→ 개발자 입장에서.. root.render()는 한 번만 쓰고 업데이트 할 수는 없을까?

state

변경되어 적용될 값들을 state로 지정

이 state를 변경할 때는 다른 일반 변수들처럼 값을 대입하면 안되고
setState같은 메소드를 호출하여 변경하여야 하는데 이때 자동으로 re-rendering이 이루어짐(rendering 되기 전에 호출되는 shouldComponentUpdate()의 값이 true 가 나오도록)

함수형과 클래스형에서의 state 사용

클래스 형은 아래와 같이 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를 사용하는 것을 권장하고 있음

state를 업데이트 할 때 중요한 것

  • 위에서 말한 것처럼 값을 업데이트 할 때는 state 변경 메소드 및 함수를 이용하여야 함
    직접적으로 대입하는 것은 의미가 없음
  • 상태 업데이트가 꼭 한 렌더링에 한 번만 일어나는 것은 아님
    그렇다보니 비동기적인 작업으로 한 번에 몰아서 업데이트가 되는데 그렇기 때문에
    바로 값이 바뀔 것을 기대하고 그 값에 의존하도록 코드를 구성하는 것은 옳지 않음
    this.setState('안녕');
    console.log(this.state.greet); // hello
  • setState를 하게 되면 값을 완전히 덮어 씌우게 됨
    만약 배열이나 객체같이 여러 값을 포함하고 있는 경우 원하는 부분만 바꾸려고 해당 부분만 파라미터로 넘겨주는 경우 다른 부분은 전부 사라짐

생명주기 LifeCycle

mount - update - unmount
컴포넌트가 처음 등록될 때 - 컴포넌트를 업데이트 할 때 (re-rendering) - 컴포넌트가 사라질 때

이 함수들React.Component의 메소드
따라서 이를 상속받는 클래스형 컴포넌트들은 관련 라이프 사이클 함수를 오버라이딩해서 각각의 순간에 해야할 작업들을 지정해줄 수 있음

독립적인 컴포넌트

서로가 뭔지는 별로 안 궁금하고, 각 컴포넌트의 state는 모두 독립적
→ 이런 독립성이 리액트 컴포넌트의 장점

그래도 props 를 통해 값을 위에서 아래 방향으로 전달하는 것은 가능한데
아래에서 위로 값을 전달할 수는 없을까?
→ 유사 해결책이 있는데 직접적으로 값을 전달한다기 보다 상위 컴포넌트의 값을 수정하는 함수를 넘겨주고
이를 이용하여 하위 컴포넌트에서 연산을 하게 되면 상위 컴포넌트의 값을 바꿀 수 있음

const Parents = () => {
  const [value, setValue] = useState('값');
  return (
    <Child func={setValue} />
  );
};

또는 context, Redux 등등을 사용할 수도 있음

profile
308 Permanent Redirect

0개의 댓글