오늘 배운 것

1. Props

   <Props의 특징>

• 컴포넌트의 속성(property)을 의미
  props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.

• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
  React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있음

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

• props는 읽기 전용
  props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only)인 객체가 됨.

  <Props의 사용방법>

• 하위컴포넌트에 전달하고자하는 값과 속성을 정의하고, props를 통해 전달한다. 그리고 전달받은 props를 렌더링 하는 것이다.

• props.children을 통해 <></>태그 사이의 값을 호출하는 식으로도 사용 가능하다.

1. State(상태): 컴포넌트 내부에서 변경될 수 있는 값

• useState를 통해 state를 다룰 수 있으며 import {useState} from 'react'로 불러온다

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

• state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

• 문법적으로는 isChecked, setIsChecked는 useState의 리턴값을 구조분해할당한 변수이다.

• 앞에 있는 것이 저장 변수, 뒤에 값이 갱신(변경)함수이다.

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

1. React 이벤트처리

• React에선 이벤트 처리 시 소문자 대신 camelCase를 사용함. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달하여야 한다.
• HTML 이벤트 처리방식

<button>Event</button>

• React 이벤트 처리방식

<button onClick={handleEvent}>Event</button>

내일 배울 것

• State & Props Bare Minimum 및 Advanced과제!(Advanced까지 완주 해보자!)