[React] Component, state, props

✅ Component

---

• 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

• 소프트웨어의 재사용을 어렵게 하고 유지보수 비용이 크게 증가하는 원인이 된다. 이러한 상황에서 소프트웨어의 재사용의 중요성과 필요성을 위해 나온 기술이 컴포넌트 기술이다.

• 컴포넌트를 선언하는 방식에는 Function 컴포넌트와 Class 컴포넌트가 있다.

📂 Class Component

class Welcome extends React.Component {
		render() {
			return <h1>Hello</h1>;
		}
	}

• 옛날에 만들어진 리액트 관련 라이브러리의 경우에 Hooks 지원이 아직 안되는 경우가 있을 수 있다.

• 클래스형 컴포넌트에서는 JSX를 반환하기 위해 render() 함수를 사용한다.

📂 Function Component

	function Welcome(props) {
		return <h1>Hello</h1>;
	}

• 함수형 컴포넌트는, props로 받을 객체 인자를 정의하고, JSX를 반환하는 것으로 기본 형태를 갖춘다.

• 함수형 컴포넌트에서는 return문에서 JSX를 반환할 수 있다.

✅ props

---

• props란 컴포넌트끼리 값을 전달하는 수단이다.

• props는 읽기 전용이다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환해야한다.

Class Component 예시

class Intro extends React.Component {
	render() {
    	return <h1>{this.props.name}입니다.</h1>;
    }
}

Function Component 예시

function Intro(props){
	return <h1>{props.name}입니다.</h1>;
}

✅ state

---

• props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다.

const array = [1, 2];
const arr1  = array[0];
const arr2 = array[1];

const array = [1, 2];
const [arr1, arr2] = array;

const [value, setValue] = useState(0);

✅ 요약

---

Props와 State

• React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용된다.

Props

• 불변의 데이터
• 부모로부터 전달되는
• 변경 불가

State (상태)

• 가변 데이터
• 구성 요소에 의해 유지
• 변경 가능

Props와 State 차이점

• State는 내부 (컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있다.
• Props는 외부(부모 컴포넌트)에서 상속 받는 데이터이며, 데이터를 변경할 수 없다.