개발하는데 다 이유가 있겠지

정리

React-Doc-Study/1주차 at main · tjddnr9553/React-Doc-Study

---

컴포넌트 생성 및 중첩하기

컴포넌트(Component)란?

고유한 로직과 모양을 가진 UI(사용자 인터페이스)의 일부입니다. 마크업을 반환하는 자바스크립트 함수로, 마크업이란 태그로 둘러싸인 코드를 의미합니다. 컴포넌트의 이름은 항상 대문자로 시작하고, HTML 태그는 소문자로 시작합니다. export default 키워드는 파일의 기본 컴포넌트를 지정합니다.

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

// MyButton을 선언했기 때문에 다른 컴포넌트에서 중첩 가능
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

 

export / import / export default

• export(내보내기): 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보냅니다.
• import(가져오기): 다른 파일에서 내보낸 것을 가져와 사용합니다.
• export default: 해당 모듈의 기본값을 지정합니다.

// export 예시
export let months = ['Jan', 'Feb', 'Mar'];

// import 예시
import { months } from './myModule';

// export default 예시
export default class User {
  // ...
}

---

JSX로 마크업 작성하기

JSX(Javascript Syntax eXtension)는 React에서 개발을 위한 자바스크립트를 확장한 문법입니다. JSX 내에서 자바스크립트 표현식을 사용하거나 조건부 렌더링 등 다양한 기능을 활용할 수 있습니다.

• 특징:
  • 반드시 부모 요소 하나가 감싸는 형태
  • 자바스크립트 표현식 사용 가능 ({})
  • 삼항 연산자 사용 가능
  • React DOM은 HTML 속성 이름 대신 camelCase 프로퍼티 명명 규칙 사용
  • JSX 내에서 주석 사용 가능 ({/* ... */})
  • 리스트 렌더링 (map() 함수)
  • 이벤트에 응답하기 (onClick 등)

---

화면 업데이트하기

• useState Hook을 사용하여 상태를 관리하고 화면을 업데이트합니다.

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Hooks 사용하기

• use로 시작하는 함수를 Hooks라고 합니다.
• 컴포넌트의 상단에서만 Hooks를 호출할 수 있습니다.

---

컴포넌트 간에 데이터 공유하기

• 부모 컴포넌트에서 상태를 관리하고, 자식 컴포넌트에 props를 통해 전달하여 데이터를 공유합니다.

function과 const 선언의 차이

• function 선언: hoisting을 지원하고, 함수인지 명확하게 구분됩니다.
• const 선언: 주로 고차 함수의 콜백 함수로 사용됩니다.