Quick Start

https://react.dev/learn 를 보고 정리한다.

Creating and nesting components

React는 Component로 이루어진다.

Component는 고유한 logic, apperance를 가진 UI의 일부이다.

React Component는 Markup을 반환하는 JS function이다.

function MyButton() {
    return (
        <button>I'm a button</button>
    );
}

생성된 Component를 다른 Component에 중첩(nest)시킬 수 있다.

React Component 이름은 항상 대문자로 시작해야 하며 HTML 태그는 소문자여야 합니다.

Writing markup with JSX

선택 사항이지만, 편의를 위해 대부분의 React project는 JSX를 사용한다.

Component는 여러 개의 JSX태그를 반환할 수 없다.

- 여러 개의 태그를 반환하려면 이를 wrapping하는 공통된 부모를 사용하면 된다.

- wrapper : <div>...</div>, <>...</>

- html-to-jsx : 링크

Adding styles

className을 사용해 CSS class를 사용할 수 있다.

<img className="avatar" />

React는 CSS 파일을 추가하는 법을 규정하지 않는다.

React와 관계없이 아래처럼 CSS 파일을 추가할 수 있다.

• HTML에 태그를 추가
• 빌드 도구/프레임워크 사용

Displaying data

중괄호를 사용하면 JavaScript로 "escape back"하여 코드에서 변수를 사용자에게 표시할 수 있다.

• 단순한 변수뿐만 아니라 복잡한 표현식도 넣을 수 있다.

return (
  <h1>
    {user.name}
  </h1>
);

Conditional rendering

React에서 조건을 작성하기 위한 특별한 구문은 없다. 일반적으로 JS처럼 사용하면 된다.

if문 사용

자세한 내용 : 링크

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

? 사용

자세한 내용 : 링크

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

&& 사용

자세한 내용 : 링크

<div>
  {isLoggedIn && <AdminPanel />}
</div>

Rendering lists

component의 list를 렌더링하기 위해 for loop와 array의 map()함수를 사용한다.

map()함수를 이용해 배열의 내용을 <li>항목으로 변환한다.
이때, 목록의 각 항목에 대해 고유한 식별자(문자열/숫자)를 key로 지정해야한다.

• React는 추후 항목을 삽입, 삭제 또는 재정렬하는 경우 어떤 일이 발생했는지 이해하기 위해 키에 의존합니다.

Responding to events

event handler 함수를 사용해 Component 내부에서 발생하는 이벤트에 응답할 수 있다.

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

이때, 끝에 이벤트 호출을 뜻하는 괄호를 붙이지 않아야 한다.onClick={handleClick}

• 이벤트 핸들러 함수를 호출하는 것이 아니라 전달하기만 해야한다.

Updating the screen

component에 state를 사용해 기억하고자 하는 정보를 저장할 수 있다.

1. import useState
2. useState로 부터 현재 state와 state를 업데이트할 수 있는 함수를 받는다.
   • 이름을 맘대로 지정할 수 있지만 보통 [something, setSomething]로 짓는다.

state를 사용해 카운터 버튼을 만들면 아래와 같다.

1. 초기 버튼은 useState()을 사용해 0으로 설정했기 때문에 count가 0으로 표시된다.
2. 버튼을 클릭하면 setCount()로 인해 새로운 값이 생기며, 여기서는 count를 증가시킨다.

Using Hooks

use로 시작하는 하는 함수를 Hooks라고 한다.
useState는 React에서 제공하는 built-in Hook이다.

• 그 외 built-in Hooks : React API reference
• 기존의 Hook을 결합해 자신만의 Hook을 작성 가능

Hooks는 일반 함수보다 더 제한적이다.

• 컴포넌트의 최상위 레벨에서만 Hooks을 호출 할 수 있다.
• 조건이나 루프에서 useState를 사용하려면 새로운 Component를 만들어서 넣어야한다.

Sharing data between components

위의 예제에서 각 MyButton는 독립적인 count를 가진다.

그러나 데이터를 공유하고 함께 업데이트할 수 있는 Component들이 필요한 경우가 많다.
이를 위해서는 공유하려는 Component들을 포함하는 가장 가까운 Component로 state를 이동해야한다.

위 예제에서 count를 공유하도록 코드를 구성해보자.

1. MyButton에서 MyApp으로 state를 이동한다.
2. MyApp의 state를 MyButton에게 내려준다.(click handler도 포함)
   • 중괄호를 사용해 정보를 전달할 수 있다. 이렇게 전달하는 정보를 props라고 한다.
3. MyButton에서 부모 Component에서 내려준 정보를 읽도록 변경한다.

이때, state를 위로 이동하여 Component간의 공유하는 것을 “lifting state up”라고 부른다.