props는 받은 데이터 이거나 생성된 데이터, 즉 데이터의 기원이 자기 자신이 아닌 것이고, state는 자기자신의 컴포넌트에서 만들어낸 데이터이다. 어떤 컴포넌트 기준에서 얘기하는지에 따라서 같은 데이터를 얘기하고 있을지라도 state가 될 수 있고 props가 될 수 있다.

State

state는 현재 컴포넌트에서 생성, 변할 수 있는 데이터이다.
state는 오직 state가 생성된 컴포넌트 내에서만 변경이 가능하다. state는 반드시 객체 형태로 생성 되거나 아니면 null (state를 정의하지 않음) 타입이어야 한다.
만약 직접 state를 변경한다면 그 값은 리렌더링이 되지 않는다. 그리고 state의 변경은 비동기적으로 일어난다.
즉, 컴포넌트 자신이 가지고 있는 값으로 변경할 수 있다. (=컴포넌트 안에서 컴포넌트의 상태를 나타내며, 변경이 가능한 데이터)

export default function FunctionalComponent() {
   // 함수형 컴포넌트에서의 state 관리 및 초기화를 하는 Hook
   // 클래스 컴포넌트의 this.state = { date: new Date() };와 동일
   const [date, setDate] = useState(new Date())

   const tick = () => {
       setDate(new Date())
   }

   // 마운트 되자마자 동작하게 하는 Hook
   // 클래스 컴포넌트의 componentDidMount()와 동일
   useEffect(() => {
       const interval = setInterval(() => {tick()}, 1000)
       // 클래스 컴포넌트의 componentWillUnmount()와 동일
       return () => {
           clearInterval(interval)
       }
   }, [])


   return (
       <div>
           <h1>Hello, Function</h1>
           <h2>It is {date.toLocaleTimeString()}.</h2>
       </div>
   );

}

props

props는 부모 컴포넌트에서 하위 컴포넌트로 전달되는 데이터이다. 이렇게 전달받은 데이터는 하위 컴포넌트에선 변경할 수 없다. 그리고 부모 컴포넌트쪽에서 이 props가 변경되면 하위 컴포넌트도 리렌더링 된다. 즉, 부모가 자식한테 넘겨주는 값으로 읽기 전용 (= 변경이 불가능한 데이터)이다.

// 부모 컴포넌트 영역
function App() {
  return (
    <div className="App">
      {/* 넘겨주고 싶은 속성 명을 적어서 그 값과 함께 넘겨준다. */}
     <Hello name="Sara"/>
    </div>
  );
}
// 자식 컴포넌트 영역
export default function Hello(props) {
    // 넘겨받은 props라는 함수의 매개변수로 들어가게 되고
   
  return (
    // 사용하고 싶은 props의 속성 명을 호출하여 사용한다.
    <div>안녕하세요 {props.name}</div>
  )
}

// 자식 컴포넌트 영역을 구조분해 할당으로 구현
export default function Hello({name,color}) {
    // 부모 컴포넌트에서 보낸 값을 자식 컴포넌트의 매개변수로 넣어주는것
  return (
    <div style={{
        color:color
    }}>안녕하세요 {name}</div>
  )
}