React
- React의 state와 props란?
state는 상태이며, 컴포넌트내에서 변할 수 있는 값입니다
즉 컴포넌트 내부에서 선언하며, 내부에서 값을 변경 할 수 있습니다
예를들어 인터넷 쇼핑몰에서 당장구매할 물건과, 당장 구매하지 않을 물건을 체크박스로 구분합니다
이를 장바구니에서 상태로 구분해 본다면 체크박스에 체크된상태와, 체크를 안한 상태라고 보면 됩니다.
state사용방법?
state의 이름과 초기값을 constructor(생성자)에서 설정해 주고, render() 함수에서 this.setState 함수를 통해 state를 변경해 줄 수 있습니다.
setState로 state의 값을 변경한 다음, 다른 특정한 작업을 하고자 할 때에는 setState의 두 번째 파라미터에 콜백 함수(callback function)를 등록하면 됩니다.
props는 변하지 않는 값입니다.
상위컴포넌트에서 하위 컴포넌트로 정보를 전달하는 방법으로 props는 오직 외부에서 전달 받는 값이기 때문에 컴포넌트 내에서 변경 할 수 없습니다.
어떤 타입의 값도 할당하여 전달 할 수 있도록 객체 형태이며, 모든 리액트 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다
props에는 불리언 값(true, false), 숫자, 배열과 같은 다양한 형태의 데이터를 담을 수 있다. 공백 구분으로 여러 개를 담는 것도 가능하다.
💡 props에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호({})로 값을 감싸야 한다.
💡 props는 읽기 전용이므로 컴포넌트의 내부에서 props를 수정해서는 안 된다. 입력값을 수정하지 않는 함수를 순수 함수라고 호칭하며, 모든 React 컴포넌트는 자신의 props를 다룰 때, 순수 함수처럼 동작해야한다.
props를 받는 함수형 컴포넌트에 인자를 정의하면, props를 속성으로 가지는 객체 Object가 해당 인자로 전달된다. 컴포넌트 내부에서 사용 시, 객체에 존재하는 값을 가져오듯 점 연산자(.)를 사용하여 원하는 props를 꺼내 쓸 수 있고, 이를 중괄호로 감싸 { [인자 이름].[props 이름] } 형태로 사용한다.
// 객체 인자를 통해 props 받아오기
function Dog(props) {
return {
<div>{props.name}</div>
<div>{props.age}</div>
}
}클래스형 컴포넌트에서 props를 사용할 때는 this.props로 불러와 사용한다. 클래스형 컴포넌트에서 propTypes나 defaultProps를 사용할 때는, 클래스 내부에서도 지정할 수 있다.
