리액트에는 컴포넌트가 있고 컴포넌트에는 입력과 출력이 있다.
컴포넌트는 데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수이다.
자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.
부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터로,
직접 수정이 불가능 한 값이다(단방향 데이터 흐름)
✅ props로 데이터 전달하는 방법
import Welcome from './Welcome'; const App=()=> { return ( <div> <Welcome name="Sara"/> </div> ); }
-> 우선 Component에 prop을 정의하고 값을 할당한다.
Welcome 은 App(부모컴포넌트)의 자식 Component 이므로,
값을 전달하고 “name” 에 접근하여 값을 가져 올 수 있다.const Welcome=(props)=> { return <h1>Hello, {props.name}</h1>; } class Welcome extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1>; ) } }
-> React 는 {name: ‘Sara’} 를 Props 로 하여 Welcome Component를 호출하고, Welcome Component 는
Hello, Sara
를 반환하게 된다.✅ props 의 재사용
import Welcome from './Welcome'; const App=()=> { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); }
-> Welcome Component 에 다른 props를 전달하여, 같은 패턴으로 여러번 출력되므로 효율적으로 재사용이 가능하다.
✅ props 의 데이터 형태
Props 에는 숫자, Boolean, 배열 등 다양한 형태의 데이터를 전달할 수 있다.
공백 구분으로 여러 개를 담는 것도 가능하다.
문자를 제외하고는 {}로 감싸서 데이터를 전달해야한다.import Welcome from './Welcome'; function App() { return ( <div> <Welcome name={["Sara", "Cahal", "Edite"]} /> </div> ); }
✅ props 의 특징
- props는 읽기 전용객체 이다.
따라서, 컴포넌트의 내부에서 props를 수정해서는 안 된다.
이처럼 입력값을 수정하지 않는 함수를 순수 함수라고 호칭하며,
모든 React 컴포넌트는 자신의 props를 다룰 때 순수 함수처럼 동작해야한다.
- props를 받는 함수형 컴포넌트에 인자를 정의하면, props를 속성으로 가지는 객체 Object가 해당 인자로 전달된다.
컴포넌트 내부에서 사용 시, 점 연산자(.)를 사용하여 원하는 props를 꺼내 쓸 수 있고 이를 중괄호로 감싸 { [인자 이름].[props 이름] } 형태로 사용한다.
- props 구조 분해 할당 으로 받아오기
구조 분해 할당으로 props를 받아오게 되면, props.propsName이 아닌 propsName만 적으면 되기 때문에 조금 더 편리하게 사용할 수 있다. (점 연산자 사용을 줄임)
또한 , 구조 분해 할당으로 props를 받아오면 필요한 것만 받아올 수 있다.
부모컴포넌트는 하나지만, 자식 컴포넌트가 여러개인 경우 구조분해 할당이 props를 내려주고 받는데 조금 더 편리하다.//구조분해 할당으로 props 받아오기 //기존 파라미터 부분에는 props라고 적어 props의 모든것을 받음. export const function BoardWrite({handleInput, handleChange}){ //기존 방법은 props.handleInput , props.handleChange <input onChange={handleInput} <button onClick={handleChange} }
- 클래스형 컴포넌트에서 props를 사용할 때는 this.props로 불러와 사용한다.
// 클래스형 컴포넌트에서 props 사용하기 class Dog extends React.Component { static defaultProps = { ... }; // 컴포넌트 props 초기값 지정 static propTypes = { ... }; // 컴포넌트 props 타입 확인 render() { // 구조 분해 할당으로 props 사용 const { name, age } = this.props; return <div>{name}</div>; } }
- defaultProps 프로퍼티를 할당하여 props 의 초기값을 정의할 수 있으며,
prop-types 를 통하여 props의 타입을 확인 할 수 있다.// 컴포넌트 props 초기값 지정 Dog.defaultProps = {, name: '이름', age: 0, } // 컴포넌트 props 타입 확인 Dog.propsTypes = {, name: PropTypes.string.isRequired, age: PropTypes.number, }
prop을 통해 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리를 해서
리턴값을 만들면 그 리턴값이 새로운 UI가 된다.
이 때, prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴값을 만들어 주는 또 하나의 데이터로 state가 있다.
state 는 Component 내부에서 가지고 있는 값으로,
상태에 따라 변하는 동적 데이터이다(변경할 수 있음)
state 는 props 와 다르게 자동 생성되지 않아 명시적으로 state 를 기술 해야 한다.
여러 개의 컴포넌트 간의 state를 동기화시키기보다, 공통 조상으로 끌어올려 하향식 데이터 흐름을 이용할 것
✅ state를 사용하는 방식
<클래스 Component 에서의 State 사용>
// class ClassExample extends React.Component { constructor(props) { super(props); // state 초기값 설정 this.state = { count: 0, }; } render() { const { count } = this.state; // state 조회 return ( <div> <p>You clicked {count} times</p> <button onClick={() => { this.setState({ // this.setState를 통해 state 업데이트 count: count + 1 }); }}> Click me </button> </div> ); } } }
-> 클래스형 컴포넌트에서 state를 사용할 때는 객체 형식의 this.state를 통해 state 객체의 초기값을 설정하고, 조회할 수 있다.
state 값을 변경할 경우, this.setState를 사용하여 새로운 값을 줄 수 있다.
<함수 Component에서 state 사용하기>
- Hook이 React 버전 16.8에 새로 추가되면서, Function Component에서도 상태 값과 여러 React의 기능을 사용할 수 있게 되었다.
- 함수형 컴포넌트에서 state를 사용하게 해주는 useState Hook
https://ko.reactjs.org/docs/typechecking-with-proptypes.html
https://ljh86029926.gitbook.io/coding-apple-react/1/props-and-state
https://minjung-jeon.github.io/React-props-state/#props-%EC%9D%98-%EC%9E%AC%EC%82%AC%EC%9A%A9
https://velog.io/@soyi47/React-Component-props-state
https://dev-yakuza.posstree.com/ko/react/props-state/
https://dev-cini.tistory.com/8