Component, props, state

1.Component

컴포넌트는 웹 사이트를 조각 낸 것으로 그 조각 하나하나가 각자 기능을 한다. 

 

유투브의 동영상 플레이어를 예로 든다면 전체를 감싸는 App, 동영상 플레이어 그리고 동영상을 재상하는 부분, 재생목록, 재생목록에서 보여주는 동영상과 그 동영상에 대한 설명이 모두 각각의 컴포넌트이다. 컴포넌트는 잘게 쪼갤수록 좋다. 잘게 쪼갤수록 재사용성이 높아지고 하나의 컴포넌트에서는 하나의 기능만을 함으로 에러를 잡기에도 좋다.

// 함수 컴포넌트

function welcome(props) {
	return <h1>Hello, world!</h1>;
}

//ES6 class 사용 컴포넌트 정의

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

2.Props

props는 부모 컴퍼넌트로 부터 물려받는 속성으로 이를 통해 부모 컨포넌트와 소통할 수 있다. 

(동영상 플레이어의 부모는 App이므로 App의 속성을 동영상 플레이어가 이어받는다.)

부모 컨포넌트에서 전달하는 props가 바뀌면 자동으로 업데이트 된다. 

// DOM 태그
const element = <div />;

//사용자 정의 컴포넌트
const element = <Welcome name="Sara" />;

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다.

이 객체를 “props”라고 합니다.

render(<Dog name = "siba" birth = {0721}, document.detelementByid("root")

Dog 컴포넌트를 부착하는 부분에서 추가적인 속성으로 name의 속성 값은 "siba"로 birth 의 속성 값은 0721로 주었다.

바로 이것이 props이다. 컴포넌트 내에서 this.props.속성이름 으로 접근이 가능하다.

(위의 Dog 컴포넌트에는 this.props.name 과 this.props.birth 가 있다.)

 

props는 html처럼 기본이 문자열이기 때문에 문자열 외의 자료형을 전달하려면 { }안에 넣어야 한다.

 

defaultProps

 

Dog.defaultProps = {
	lang: "javascript",
};

render() {
	return (
		<div>
			<span> {this.props.lang}는 재밌어! </span>
		</div>
	);
}

defaultProps는 부모 컴포넌트에서 넘겨주는 속성이 없다면 자동으로 defaultProps사 적용되어 defaultProps의 값이 넘어간다.

즉 위의 예시에서는 {this.props.lang} 값에 Dog.defaultProps 에서 lang을 javascript로 만들었기 때문에 javascript가 넘어가서 

javascript는 재밌어! 라는 문장이 완성된다. 

 

propTypes

Basic.propTypes = {
  name: PropTypes.string.isRequired,
  birth: PropTypes.number.isRequired,
  lang: PropTypes.string,
};

PropsTypes 객체는 React의 props 자료형 검사법으로 prop-types 패키지를 따로 설치해야 쓸 수 있다.

PropsTypes에 정의해 두었으면 React가 해당 props가 PropsType의 자료형과 일치하는지를 검사한다.

즉 string으로 되어있는데 number가 들어오면 에러가 나게된다. 

isRequored는 필수라는 뜻으로 반드시 있어야할 속성에 붙여준다. isRequored가 없으면 선택적이라는 뜻이다.

(React 공식문서에서 다양한 PropsTypes를 확인할 수 있다.)

 

Children

const Parent = () => {
  return (
    <div id = "parent"> {this.props.children} </div>
  );
};

<Parent>
  <span>Hello</Hello>
</Parent>

span 태그는 this.props.children과 연결된다. 결과는 다음과 같다.

<div id = "parent"><span>Hello</spane></div>

3.State

class Dog extends React.component{
  construcotr(){
    this.state = {
      hidden: false
    };
  }
}

state는 컴포넌트가 만들어질 때 가장 먼저 설정 되는 것으로 constructor안에 적어준다. state는 해당 컴포넌트에만 적용되는 상태 이다.

props처럼 자동으로 업데이트 된다.

{!this.state.hidden && <span>{this.props.name}님 반갑습니다.</span>}

<button onClick = {() => this.setstate(() = > ({hidden:true}))}> 숨기기 </button>

 jsx 내에서는 if문을 사용할 수 없기에 && 이나 ||을 사용하여 render 여부를 결정할 수 있다.

위 코드는 this.hidden.state의 상태가 false라면 span 태그를 추가하라고 되어 있다.

버튼을 눌렸을 때 hidden state를 true로 만들수 있다. 

(html에서는 onclick이지만 여기에선 onClick이라고 쓴다 대소문자를 확실히 구분하자!!)

 

setState

state를 바꾸려면 setState를 사용해야만 한다.  

this.setState((이전 상태) => ({이름: 바꿀 값}));

 

setState의 콜백 함수는 매개변수로 이정 상태를 제공한다.