리액트 공식문서 요약, 퀵 스타트 (Quick Start)

목차

• 리액트 컴포넌트
• 마크업과 스타일 추가 방법
• JS 내부 데이터 이용하는 방법
• 조건부 렌더링 방법
• 리스트 렌더링 방법
• 이벤트 응답 방법
• 훅스 사용 방법
• 화면 업데이트 방법
• 컴포넌트간 데이터 공유 방법

리액트 컴포넌트

컴포넌트란?

• 리액트 구성요소
• 로직과 모양을 가진 UI 단위
  • 작은 버튼부터 전체 페이지까지 다 하나의 컴포넌트로 취급할 수 있다.
• 코드상에서는 마크업을 반환하는 JS 함수

컴포넌트의 예: MyButton

• 컴포넌트 이름은 대문자로 시작
• HTML 태그는 소문자로 시작하는 것과 상반된다.

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

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

JSX 마크업 규칙

단 하나의 태그만 반환

• 최상위엔 단 하나의 태그만 있어야 한다.
• 여러개일 때는 <>...</> 로 감싸주면 된다.

HTML to JSX 변환 도구

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>
        Hello there.
        <br />
        How do you do?
      </p>
    </>
  );
}

HTML 과 속성 이름이 다르다

속성 이름이 다른 이유는 JSX 가 HTML 같지만 사실상 자바스크립트 코드여서 HTML 과 예약어가 겹치기 때문인 경우가 많다. ex. class, for 등

• class 대신 className
• for 대신 htmlFor
• onclick 대신 onClick 이건 공통적으로 모든 이벤트를 Camel Case 로 작성한다.

<img className="avatar"/>
<input type="text" id="username" name="username" />
<label htmlFor="username" />
<button onClick={() => {}}>

JS 내부 데이터 이용하는 방법

• Curly braces({}) 를 이용하면 된다.

HTML Text Node 로 이용하기

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

내부 속성에서 이용하기

• {} 안엔 표현식이 오면 된다.
  • 내부에서 다양한 연산도 가능하다.

return <img src={user.imageUrl + ".png"} />;

조건부 렌더링

• 따로 제약 없이 일반 자바스크립트처럼 생각하면 된다.

if 이용

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

삼항 연산자 이용

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

&& 이용

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

리스트 렌더링

• 일반 자바스크립트에서 배열에 대한 for 문이나 .map() 메서드 이용하듯이 하면 된다.
• 단, 매 엘리먼트마다 key 속성이 반드시 필요하다.
  • 각 엘리먼트를 구분하는 기준이 된다.
  • 리액트는 key 를 통해 삽입,삭제,재정렬 등이 발생했는지 알 수 있다.

const products = [
  { title: "Cabbage", id: 1 },
  { title: "Garlic", id: 2 },
  { title: "Apple", id: 3 },
];

const listItems = products.map((product) => (
  <li key={product.id}>{product.title}</li>
));

return <ul>{listItems}</ul>;

이벤트 응답 방법

• 컴포넌트의 이벤트 속성에 {} 를 사용하여 JS 이벤트 핸들러 함수를 인자로 주면 된다.

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

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

훅스 사용 방법

• use 로 시작하는 함수를 리액트에서 보통 훅스라고 한다.
  • 다양한 훅스가 존재한다.
  • Built-in Hooks API Reference 공식문서
• 상태를 만들 때 사용한다.

훅스 제약조건

• 컴포넌트 최상위에서만 사용 가능하다.
• 어떤 훅스에 대한 조건부 상태 변경 혹은 루프를 돌리고 싶다면 컴포넌트를 따로 분리해서 훅스를 그 컴포넌트의 최상위에 정의하면 된다.

화면 업데이트 방법

• 컴포넌트의 상태를 변경하면 된다.
• useState 를 통해 컴포넌트에 상태를 주입하면, 상태가 변화할 때 상태가 주입된 컴포넌트의 UI가 업데이트된다.

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

컴포넌트간 데이터 공유하는 방법

• 각 컴포넌트의 상위 컴포넌트를 구성해서 상위 컴포넌트의 상태를 props 를 통해 하위 컴포넌트로 내려주면 된다.
  • 이를 영어로 상태 끌어올리기(lifting state up) 라고 한다.
• 아래는 MyApp 에서 MyButton 에 내려주는 예제이다.

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}