[React 기초 문법] #3 state와 props

props와 state의 의미

 

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로 컴포넌트 내에서 읽을 수만 있다.

따라서 props를 바꾸려면 부모 컴포넌트에서 바꾸어야만 한다 .

 

공식문서에 의하면

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. 
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수
(입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수)처럼 동작해야한다.

라는 말이 있다. 

 

사용자의 액션, 네트워크의 응답 및 다른 요소에 대한 응답으로 시간에 따라 props가 컴포넌트 내에서 바뀌어야만 하는 상황이 있는데 이때 사용하는 것이 바로... state이다.

 

state의 종류 : 클래스형 컴포넌트의 state

우선 클래스형 컴포넌트에서 state는 다음과 같이 constructor 메서드를 사용하여 작성할 수 있다. 

constructor(props){
	super(props);
    this.state = {
		name:'Daniel'
	};
}

위 예시에서 super()를 호출해주는 이유는 constructor 안에서 this를 사용하기 위해서

 

그리고 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출하기 위함이다.

 

 constructor를 사용하지 않고도 클래스형 컴포넌트에서 state를 작성할 수 있는데 예시는 아래와 같다. 

 

state = {
	name:'Daniel'
}

두 예시를 통해 알 수 있는 것은 state는 객체 형식이라는 것이다.

 

render 함수 안에서 state를 불러올 때는 this.state로(구조분해할당하여) 불러올 수 있고,

 

this.setState라는 함수로 state 값을 바꿀 수 있다. 

 

this.state가 끝난 후 다른 작업을 실행하기 위해서는
setState의 두번째 파라미터로 다른 작업에 해당하는 콜백함수를 넣어주면 된다. 

 

state의 종류 : 함수형 컴포넌트의 state(useState Hooks)

 

useState는 배열 구조분해할당을 통해 사용할 수 있으며 상태 초기값을 useState 함수의 인자에 넣어주면 된다. 

 

초기값은 반드시 객체가 아니어도된다. 

 

useState 함수 호출 시 배열이 반환되는데 첫번째 인자는 상태이고,

 

두번재 인자는 상태를 바꾸어 주는 set함수(혹은 setter 함수)이다.

 

const [name, setName] = useState("Daniel")

 

state를 바꿀때에는 반드시 setState혹은 set함수를 사용해야하는데....

 

즉 직접 state를 재할당하는 식으로 변경하면 안되는 것이다.(하지만 실제로 변경은 된다. 골때린다.)

 

변경하면 실제로 바뀌지만 이것이 바로바로 화면에 rerendering 되지 않기 떄문에.....

 

되도록이면 이렇게 사용하는 것을 지양하라고 한다.

 

스프린트를 해오며 느낀 것은 배열이나 객체의 사본에 값을 넣어주어 업데이트 한 후

 

그 사본을 set함수와 setState로 업데이트 해야한다는 것.