React의 데이터 다루는 방법

zitto·2023년 3월 20일
0
post-thumbnail

리액트에는 컴포넌트가 있고 컴포넌트에는 입력과 출력이 있다.
컴포넌트는 데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수이다.
자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.

💡 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 의 특징

  1. props는 읽기 전용객체 이다.
    따라서, 컴포넌트의 내부에서 props를 수정해서는 안 된다.
    이처럼 입력값을 수정하지 않는 함수를 순수 함수라고 호칭하며,
    모든 React 컴포넌트는 자신의 props를 다룰 때 순수 함수처럼 동작해야한다.

  2. props를 받는 함수형 컴포넌트에 인자를 정의하면, props를 속성으로 가지는 객체 Object가 해당 인자로 전달된다.
    컴포넌트 내부에서 사용 시, 점 연산자(.)를 사용하여 원하는 props를 꺼내 쓸 수 있고 이를 중괄호로 감싸 { [인자 이름].[props 이름] } 형태로 사용한다.

  3. 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}
}  
  1. 클래스형 컴포넌트에서 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>;
    }
}
  1. defaultProps 프로퍼티를 할당하여 props 의 초기값을 정의할 수 있으며,
    prop-types 를 통하여 props의 타입을 확인 할 수 있다.
// 컴포넌트 props 초기값 지정
Dog.defaultProps = {,
	name: '이름',
    age: 0,
}
// 컴포넌트 props 타입 확인
Dog.propsTypes = {,
	name: PropTypes.string.isRequired,
    age: PropTypes.number,
}

어떻게 하면 React.js에 값이 바뀔 데이터를 담아줄 수 있을까❓

prop을 통해 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리를 해서
리턴값을 만들면 그 리턴값이 새로운 UI가 된다.
이 때, prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴값을 만들어 주는 또 하나의 데이터로 state가 있다.

💡 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

💡 한 눈 정리

Props

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

State

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

Props와 State의 차이점

  • Prop은 사용하는 외부자를 위한 데이터(변경불가능)
  • state는 컴포넌트를 만드는 내부자를 위한 데이터(변경가능)

🖇️ [출처 및 참조]

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

profile
JUST DO WHATEVER

0개의 댓글