State(상태)와 Props(속성)

React에서 state와 props는 둘 다 컴포넌트에서 데이터를 다루는 데 사용되지만, 목적과 사용 방법에서 차이가 있다.

📖 State

• 컴포넌트 내부에서 관리되는 값으로서 변경 가능
• 이 값은 컴포넌트가 렌더링되는 동안 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링

즉, React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, 컴포넌트 내부에서 변경할 수 있고 컴포넌트의 렌더링 결과 결정

 

장점

1. 컴포넌트의 내부 상태를 유지
2. 동적인 UI를 구성
   • 예) 상태 데이터를 사용하여 사용자 입력에 대한 반응을 보여주거나, 외부 API에서 데이터를 가져와서 화면을 업데이트
3. React의 렌더링 성능을 최적화
   • React는 컴포넌트의 상태가 변경될 때만 렌더링을 다시 수행
   • 상태 데이터를 사용하여 불필요한 렌더링을 방지할 수 있음

단점

1. State의 관리가 어려움
   • 상태가 변경될 때마다 컴포넌트의 렌더링이 다시 일어나므로, 상태가 변경되는 빈도가 높으면 성능 문제가 발생
2. State가 공유되지 않음
   • 컴포넌트 간에 데이터를 전달할 때 Props를 사용해야 함
3. State의 중복 발생
   • 코드의 가독성과 유지보수성이 저하
4. State의 불변성 유지
   • 컴포넌트 간에 state가 공유되거나 상태 업데이트가 예기치 않게 발생
5. State의 크기가 커지면 성능 문제 발생
   • 상태 업데이트를 처리하는데 많은 시간이 소요

예제 코드

class Counter extends React.Component {
	constructor(props) {
    	super(props);
        this.state = { count : 0 };
    }
    
    incrementCount() {
    	this.setState({ count : this.state.count + 1});
    }
    
    render() {
    	return (
        	<div>
            	<p> Count: {this.state.count} </p>
                <button onClick = {() => this.incrementCount()}>Increment</button>
            </div>
        );
    }
}

📖 Props

• 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되는 값
• 직접적으로 수정할 수 없는 값으로, 읽기 전용
• 불변하며, 컴포넌트 내에서 수정할 수 없음
• Props를 전달하려면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야만 함

즉, 컴포넌트를 불변적으로 만들어주기 때문에, 컴포넌트 간에 데이터를 전달하거나 재사용에 유용

 

장점

1. 데이터의 일관성 유지
2. 재사용성 높음
3. 유지보수 용이

단점

1. Props는 읽기 전용
   • Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터
   • 자식 컴포넌트에서 Props를 변경하려고 하면, React에서 경고 메시지를 표시하며 허용하지 않음
   • 이로 인해 컴포넌트 간에 데이터 흐름이 복잡해질 수 있음
2. Props의 전달이 너무 많아질 수 있음
   • 컴포넌트의 중첩 수준이 깊어질수록 Props의 전달이 너무 많아져 코드의 가독성 저하
3. Props가 공유되지 않음
   • Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이기 때문에, 컴포넌트 간에 Props를 공유할 수 없음
   • 이는 상태를 관리할 때 발생하는 중복 코드 문제와 비슷한 문제를 발생시킬 수 있음
4. Props의 이름 충돌이 발생할 수 있음
   • Props의 이름을 변경해야 하거나, 자식 컴포넌트에서 Props를 사용하기 전에 검사하고 처리해야함
5. Props의 타입 체크 필요
   • Props는 JavaScript의 동적 타입 시스템을 사용하기 때문에, 부모 컴포넌트에서 전달된 Props의 타입이 예상과 다를 수 있음

예제 코드

function ParentComponent() {
	return (
            <ChildComponent prop1 = "value1" prop2 = "value2" />
    	);
}

function ChildComponent(props) {
	return (
    		<div>
        		<p>Prop 1: {props.prop1} </p>
            		<p>Prop 2: {props.prop2} </p>
       		</div>
    	);
}

📖 정리

	State	Props
소유	컴포넌트 내부	컴포넌트 외부
변경 가능성	변경 가능	읽기 전용
데이터 전달 방식	컴포넌트 내부에서 처리	부모 컴포넌트에서 자식 컴포넌트로 전달
범위	컴포넌트 내부	컴포넌트 내부/외부
초기값 설정	constructor 메소드 내부에서 설정	부모 컴포넌트에서 전달

 

✨ 추가 공부

단방향 데이터 흐름

리액트는 데이터 흐름이 단방향 구조

 

단방향이란?

- Props가 부모에서 자식으로만 흐른다는 것

(상태관리 라이브러리를 사용하면 우회하는 방법은 있지만 기본적으로는 부모에서 자식으로만 흐름)

 

리액트의 데이터 흐름이 단방향 구조이기 때문에 에러를 캐치하기가 더 쉽고, 보기에 깔끔함

컴포넌트

리액트로 만들어진 앱을 이루는 최소한의 단위

- 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수

- UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩

 

컴포넌트의 종류

- 함수형 컴포넌트

- 클래스형 컴포넌트

 

https://goddaehee.tistory.com/299

---

📚 참고 

https://steemit.com/hive-141202/@realmankwon/react-props-state

 

[개발] React 에서 props와 state의 차이 — Steemit

https://velog.io/@hjthgus777/13-React-state-props

state & props

https://suzzeong.tistory.com/133

React의 state와 props

https://ljh86029926.gitbook.io/coding-apple-react/1/props-and-state

props & state | React