[React] Props(불변 객체, Prop Drilling)

결, 꼬재랑 함께하는 레벨2 방학 스터디

 

😀 Props

• 컴포넌트에 어떠한 값을 전달할 때 props를 사용한다. 여기서 props는 properties의 줄임말이다.
• props는 부모 컴포넌트가 전달할 수도 있고 컴포넌트 자체의 defaultProps 정적 메서드(static method)를 통해 전달할 수도 있다.
• props는 불변성을 가진 읽기 전용이다.

 

porps 예시

// 함수 컴포넌트
function Coke(props){
	return <h1>Hello, {props.name}</h1>;
}

 

// 클래스 컴포넌트
class Coke extends React.Component{
	render(){
		return <h1>Hello, {this.props.name}</h1>;
	}
}

 

// 비구조화 할당(구조 분해 할당)
function Coke({ name }){
	return <h1>Hello, {name}</h1>
}

 

// defaultProps
function Coke({ name }){
	return <h1>Hello, {name}</h1>
}

Coke.defaultProps = {
	name: '코카콜라'
}

// or

function Coke({ name = '코카콜라' }){
	return <h1>Hello, {name}</h1>
}

 

props.children

컴포넌트 태그 사이에 값이 있을때 ‘children’이란 예약어를 사용한다.

props.children

 

 

😮 리액트에서 속성을 불변 객체로 다루는 이유는 무엇일까요? 또, 불변 객체로 다루지 않았을 때 발생할 수 있는 이슈는 무엇일까요?

불변 객체란?

• 객체 생성 후에 상태를 바꿀 수 없는 객체를 말한다.

불변 객체를 사용하는 이유는?

• 불변 객체의 상태를 변경할 수 없기 때문에 여러 곳에서 사용하더라고 안전하게 사용할 수 있다.
• 불변 객체에 대해 작업하는 코드는 불변 객체를 사용하는 곳에 영향을 미치는 것을 고려하지 않아도 된다.
• 불변 객체를 복사할 경우, 참조만 하기 때문에 메모리를 아끼고 성능도 향상시킬 수 있다.

React에서 Props, State의 불변성

• React에서는 Props와 State의 변경을 불변성을 이용해 감지하고 변경이 되었다면 리렌더링을 한다.
• 그러나 자바스크립트에서 참조 타입의 데이터인 객체는 메모리 힙 영역에 저장이 되어 내부 프로퍼티를 변경해도 같은 참조를 가지게 된다. 따라서 React에서는 객체의 특정 프로퍼티만 변경해도 객체가 변경이 되지 않았다고 인식하여 리렌더링이 발생되지 않는다.
• 객체의 프로퍼티를 변경 할려면 스프레드 연산자를 이용하여 내부 프로퍼티를 변경 시키거나 immer 라이브러리와 같은 라이브러리를 사용해야 한다.

// spread operator
const [state, setState] = useState({ name: '코카콜라', count: 0 });

...
setState(prev => ({ ...prev, count: prev.count + 1 }));
...

불변 객체로 다루지 않았을 때 발생할 수 있는 이슈?

• React는 Props와 State의 변경을 불변성을 이용해 감지하고 리렌더링을 하는데 불변 객체로 다루지 않는다면 원하는 리렌더링이 발생하지 않는다.
• 여러 곳에서 불변 객체가 아닌 객체를 사용한다면 객체의 값이 예상할 수 없는 값이 되어 엉망이 될 것이다.
• setState는 비동기적으로 state를 변경 시키는데 불변 객체로 다루지 않고 직접 state를 변경 시킨다면 이전의 값이 반환될 수 있다.

 

😮 하위 컴포넌트에서 상위 컴포넌트의 상태인 Props를 직접 수정할 수 없는 이유는 무엇일까요?

props가 변경되면 리렌더링이 되는데 하위 컴포넌트가 상위 컴포넌트의 상태인 props를 직접 수정한다면 예상하지 못한 렌더링이 발생하게 됩니다.

 

 

😮 Prop Drilling을 해결할 수 있는 방법은 Context API 혹은 Redux 같은 State Container와 Store Management 뿐일까요?

컴포넌트 합성과 children prop을 사용하여 Prop Drilling을 해결할 수 있다.

 

 

---

합성 (Composition) vs 상속 (Inheritance) - React

합성 (Composition) vs 상속 (Inheritance) – React

불변 객체와 immer

불변 객체와 immer

React와 불변객체

React와 불변객체