[section2] React State & Props

1. State

    a. 컴포넌트 내부에서 변할 수 있는 값. cf) props는 외부로부터 전달받은 값

    b. 예를들어 토글 버튼 컴포넌트는 isOn이라는 Boolean값을 가지는 state가 있고, 카운트(Count) 컴포넌트는 현재 숫자 값 의미하는 count라는 state를 가진다.

2. Props

    a. property를 의미한다.

    b. props는 부모 컴포넌트(상위 컴포넌트)에서 전달 받는다.

    c. 읽기 전용 객체다. 만약 읽기 전용 객체가 아니라면, 하위 컴포넌트에서 props를 수정할 수 있고, 상위 컴포넌트에 영향을 미칠 수 있다. side effect가 발생할 수 있고, 단방향 또는 하향식 데이터 흐름 원칙에 위배된다.

3. Props 사용 방법

    a. 전달하고 자하는 값을 { } 안에 넣고, 속성 이름을 정해준다.

    b. Child 컴포넌트에서 매개변수 props로 해당 값에 접근할 수 있다.

4. React Hook : useState

    a. 상태 저장 값을 반환하고, 이 값을 업데이트하는 함수다. 이 함수를 사용하면 마치 class에서 this.count를 사용하는 것처럼, 함수 컴포넌트 안에서 상태 값을 관리할 수 있다.

    b. useState는 배열을 반환하고, 배열의 0 번째 요소는 현재 state 값, 1번째 요소는 이를 업데이트하는 함수다.

    c. useState를 import하고, 호출과 동시에 변수에 할당을 하면 된다.

    function CheckboxExample() {
    // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
    const[isChecked,setIsChecked] = useState(false);
    }

useState에 인자로 전달된 값이 isChecked의 초기값이 되고, setIsCechked()함수를 호출하면, isChecked가 seIsCechked()함수에 전달된 인자로 새로 업데이트 된다.

5. react 이벤트 처리

    a. DOM 이벤트 처리와 유사하지만 문법적 차이가 있다.

        i. 소문자 대신 카멜 케이스를 사용한다. ex) onClick, onChange
        ii. 중괄호로 event 함수 전달
        ex ) <buttononClick={handleEvent}>Event</button>

    b. 이벤트를 전달할 때는 함수 실행 결과가 아니라 함수 자체를 전달해야 하며, 해당 함수는 arrow function으로 만들어야 한다.

    c. 자주 사용되는 이벤트

        i. onChange
            1) form 엘리먼트에서 사용자의 입력값을 제어하는데 사용된다.
        ii. onClick

6. react Controlled Component

    a. react가 state를 통제할 수 있는 컴포넌트를 Controlled Component라고 부른다.

    b. input이나 textarea에 값을 입력했을 때, state가 업데이트 되고, input과 textarea의 value와 같아지면 된다.

    c. 실습 코드에 대한 궁금점(chapter 1-4. Controlled Component)

    export default function App() {
      const [username, setUsername] = useState("");
      const [msg, setMsg] = useState("");
      return (
        <div className="App">
          <div>{username}</div>
          <input
            type="text"
            value={username}
            onChange={(event) => setUsername(event.target.value)}
            placeholder="여기는 인풋입니다."
            className="tweetForm__input--username"
          ></input>
          <div>{msg}</div>
          {/* TODO : 위 input과 같이 입력에 따라서 msg state가 변할 수 있게 
          아래 textarea를 변경하세요. */}
          <textarea
            placeholder="여기는 텍스트 영역입니다."
            className="tweetForm__input--message"
            onChange={(event) => setMsg(event.target.value)}
            value={msg}
          ></textarea>
        </div>
      );
    }

• 이 상태에서 textarea나 input 모두 순환참조 하고 있는거 아닌가? 하는 생각이 들었다. onChange는 input.value로 username을 바꾸고 있는데, value는 username을 참조하고 있고.. 근데 작동은 잘되고.. 왜지? 그리고 value는 지워도 잘 작동된다.

        i. 스택 오버플로우 참고 : HTML의 textarea와 다르게 react textarea가 value attribute를 가지는 이유 : self-closing tag이며, children을 가지지 않기 때문. HTML에서는 opening tag와 closing tag 사이에 내용을 입력하면 되는데 react에서는 self-closing이라 value 속성 안에 입력해야 한다.
        ii. input과 textarea에 value 속성이 왜 있는 건지는 이제 알았는데 순환 참조에 대한 의문이 풀리지는 않았다.
        - 과제에서는 실습할 때 처럼 input에 value를 username으로 참조하면 다음과 같은 warning이 뜬다.
        Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

이 부분에 대해선 질문해보고 추후에 수정해야겠다.