[React TIL] Props

220403

• 합입 크기로 잘라 먹는 리액트(React.js) Props 강의 수강

Props

• 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 객체로서 '전달'하는데 이 객체를 props라고 한다.
• 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체

const Welcome = (props) =>{
  return <h1>hello, {props.name}</h1>
}

ReactDom.render(
  <Welcome name="hayan" /> // 여기서 props로 넘겨주고 있음
  document.getElementById('root')
);

//출력 결과
hello hayan

• props는 읽기 전용임. 즉, 수정이 안됨

props와 state의 차이

props와 state는 일반 javascript 객체임. 또한 둘 다 변경사항이 있을 경우 render를 trigger(자동 동작)함. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, props는 함수 매개변수처럼 컴포넌트에 전달되는 반면, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됩니다.