Props 와 State

Props

부모컴포넌트가 자식컴포넌트에게 물려주는 변수/함수. props는 데이터의 흐름이라고 볼 수도 있다. 리액트에서는 데이터의 흐름이 단방향이기 때문에 자식컴포넌트가 부모컴포넌트에게 데이터를 줄 수 있는 방법은 없다.

props = {aaa:변수/함수} > aaa={변수/함수} 로도 작성 가능

// Cotainer 
import BoardWriteUI from "./BoardWrite.presenter"

const onClickSubmit = () => {
   alert("게시물 등록에 성공하였습니다!")
  };

return (
    <BoardWriterUI 
  	 onClickSubmit={onClickSubmit}> 
  	// 혼란을 막기 위해보통 함수와 props의 이름을 동일하게 설정해준다.
  )

// Presenter

export default function BoardWriteUI(props){
  
  return(
    <Wrapper>
    	<Title>제목입니다</Title>
    	<Contents>내용입니다</Contents>
    	<Button onClick={onClickSubmit}>제출하기</Button> // 부모 컴포넌트에서 가져온 onClickSubmit 함수
    </Wrapper>
    )
    
}

State

리액트 공식 문서에 따르면 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다.

즉, state를 사용한 input에 값이 입력되면 자동으로 컴포넌트를 리렌더링 하기 때문에 입력값을 화면에 출력해 줄 수 있는 것이다.

차이

props와 state는 둘 다 렌더링에 영향을 미치지만, props는 함수의 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.

props 는 읽기 전용으로 쓰이기 때문에 자신이 스스로 입력값을 바꿀 수 없는 순수함수지만 state는 이와 달리 사용자의 입력값에 따라 출력값을 변경할 수 있다.