(S1W4)TIL 20,21일차 220218 (React State & Props)

오전 8:30 - 8:45 plan / 나의 하루 목표

블로깅 잘 하고, 오늘 스프린트 잘 이해하기

오전 9:00 - 10:00 Algorithm Basic 11, 12

오전 10:00 - 12:00 chapter / React State & Props

Props - 컴포넌트의 속성(property)

- props는 성별이나 이름처럼 변하지 않는 외부로 부터 전달받은 값입니다. 웹 어플에서 해당 컴포넌트가 가진 속성에 해당합니다.

- props는 함부로 변경될 수 없는 읽기 전용 (read-only) 객체입니다. 함부로 변경되지 않아야 하기 때문입니다.

*읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다. 이는 React의 단방향, 하향식 데이터 흐름 원칙에 위배됩니다.

- 부모 컴포넌트(상위 컴포넌트)로 부터 전달받은 값입니다. props를 함수의 전달인자(arguments)처럼 전달받아 사용됩니다.

- 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.

How to use props

Props를 사용하는 방법은 3단계 순서로 나눌 수 있습니다.

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.

2. props를 이용하여 정의된 값과 속성을 전달한다.

3. 전달받은 props를 렌더링한다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      <Child text={"I m the second child"} />
    </div>
  );
}

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

props.children 

Props를 전달하는 또 다른 방법으로 여는 태그와 닫는 태그의 사이에 value를 넣어 전달할 수 있습니다

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
        <Child>I'm the second child</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};

State - 컴포넌트 내부에서 변할 수 있는 값 (애플리케이션의 "상태")

React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공합니다.

useState 사용법

- useState를 이용하기 위해서는 React로부터 useState를 불러와야 합니다.

// import 키워드로 useState를 불러옵니다
import { useState } from "react";

- 이후 useState를 컴포넌트 안에서 호출해 줍니다.

useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 됩니다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않습니다.

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

- useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수입니다. useState의 인자로 넘겨주는 값은 state의 초깃값입니다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

- 이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 됩니다. 여기서는 isChecked가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용합니다.

// JSX에서 삼항연산자 사용 예시
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

완성된 체크박스 컴포넌트 예시

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

이벤트 처리 Hands-on

React의 이벤트 처리 방식은 DOM의 이벤트 처리 방식과 유사합니다. 단 몇가지 문법 차이가 있습니다.

- React에서 이벤트는 소문자 대신 카멜 케이스 (camelCase)를 사용합니다.

- JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달합니다.

// HTML에서 이벤트 처리 방식
<button onclick="handleEvent()">Event</button>
// React의 이벤트 처리 방식
<button onClick={handleEvent}>Event</button>

onChange

React에서는 <input> <textarea> <select>같이 변경될 수 있는 입력값을 텍스트가 바뀔 때마다 발생하는 이벤트 입니다.

이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input값을 setState를 통해 새로운 state로 갱신합니다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트입니다. 

위의 onChange 예시에 버튼을 추가하여 버튼 클릭 시 input 태그에 입력한 이름이 알림 창이 팝업되게 코드를 추가합니다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

오후 1:00 - 2:00 checkpoint / React State & Props

오후 2:00 - 3:00 zoom / Checkpoint Solution

오후 3:00 - 5:00 zoom / 주간 회고

오후 9:00 - 11:00 개인 학습

 

일일 회고

 

Weekly Self Reflection