React Component, State, Props

  React - Component, Props, State

😎 Component 

 재사용성

 클래스형 컴포넌트, 함수형 컴포넌트

 element를 반환한다.

 다른 컴포넌트에 있으면 변수 이름이 같아도 다른 변수

 

Props

 Properties를 줄인 말, 컴포넌트 속성을 설정할 때 사용하는 요소

 Component에서 component로 전달하는 데이터

 부모 컴포넌트에서 자식 컴포넌트로 전달된다. (부모 컴포넌트에서 설정)

 리액트에선 단방향성(부모→자식)

 실무에선 키값과 밸류를 같게 쓴다. ex. props = {handleChangeWriter: handleChangeWriter}

 

 defaultProps로 props값을 따로 지정하지 않았을 때의 기본값을 설정할 수 있다. 

 

State

 컴포넌트 내부의 동적인 데이터(바뀔 수 있는 값)

 함수형 컴포넌트에서는 useState라는 함수(Hook)를 통해 값을 변경한다.

 부모 컴포넌트에서 자식 컴포넌트에게 props로 하여금 state를 전달한다...를 반복 가능(프롭스 드릴링)

 

* 참고로 프롭스 드릴링은 권장되는 형태는 아니다. 

 

//자식 컴포넌트
const MyComponent = (props) => {
	return (
		<div>
        	{props.name}, 안녕!
        </div>
)
}

MyComponent.defaultProps = {
	name: '모험가'
}