Cominciamo,

리액트에서 가장 헷갈렸던 건, 결과적으로는 state와 props, 이 두가지였다.
먼저 props를 배웠고, 나중에 state를 배웠는데, 이 순서가 더 헷갈렸던 것 같다. 그래서 state부터 적어보기로.

1. Component

컴포넌트에는 2가지 방법이 있다. 함수형과 클래스형으로 나누어진다.
state를 쓰기 위해서는 클래스형으로 컴포넌트를 작성해야한다.
hook을 쓰지 않고서는 함수형에서 state를 쓸 수 없다.

2. State & Props 간단 설명

state는 동적인 값을 내부에서 선언/수정하여 사용할 수 있는 값이라고 생각하면 된다. 그래서 쉽게 나는 변수선언이라고 생각을 하는 편이다.

반면에 props는 부모레벨에서 자식레벨의 컴포넌트로 값을 전달하기 위해서 사용한다. 자식 컴포넌트에서는 값을 받아오기만 하고 직접 수정은 불가능하다.

3. State

아래 코드와 같이 state를 선언한다.
state를 직접 할당함으로써 변경시킬 수 없고, setState를 사용하여 변경한다.

class toggleSwitch extends Component {
  
  state = { isOn : true }
 ...
}
...

OR

import React, { Component } from "react";
 
class toggleSwitch extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isOn : false
    }
  } 

  handleClick() {
    this.setState((state) => ({
     isOn : !state.isOn
    }))
  }

  render() {
    return (
      <div>
        <h1>{this.state.isOn}</h1>
        <button onClick={()=> this.handleClick()}>
          {this.state.isOn ? "On": "Off" }
        </button>
      </div>
    )
  }
}

export default Message

4. Props

Properties의 줄임말로, attribute라고 생각하면 좀 더 간단하고, 나는 전달자 정도로 이해하고 있다. 이 props들은 컴포넌트를 건너뛰어서 전달 될 수는 없고, 단계적으로 전달된다. (props drilling). Props를 표기하는 방식에는 여러가지가 있다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

위 아래 두 유형의 컴포넌트에 따른 props 작성 방식은 동일하다고 여겨진다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Props의 특징

• 읽기 전용이다. 컴포넌트 자체의 props를 수정하면 안되고, 순수함수처럼 사용하여야 한다.
• 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수를 순수함수라고 한다.

---

Finiamo

props 같은 경우는 this.props, (props)로 전달되는 것 외에도, 경우에 따라 ({프랍스이름(?)}) 방식으로도 전달 될 수 있다.
상태는 항상 상위 컴포넌트에서 컨트롤 되며, 이 상태가 하위 컴포넌트로 전달되어 사용될 때는 props로 전달이 된다.

아직도 좀 state는 어렵다. 그 scope의 경계를 잘 모르겠다.
그래도 점차 익숙해지는 중.