[React] 1. React란?

1. React

• 화면을 만들기 위한 Javascript 라이브러리
• ✅ state나 props가 바뀌면 컴포넌트를 다시 렌더링하고, 변경된 부분만 화면에 반영해줌

 

2. 컴포넌트

• 재사용 가능한 UI 조각 (화면을 컴포넌트라는 단위로 나누어 구성함)
• ✅ JSX를 반환하는 JS 함수
• ✅ 중첩할 수 있음

 

예시) 컴포넌트

<Button />
<Button />
<Button />

• 컴포넌트 이름은 대문자로 시작함

 

 

예시) js 함수

function Button() {
  return <button>저장</button>;
}

• html 태그는 소문자로 시작함

 

예시) 중첩 가능

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

• export default는 대표 컴포넌트를 의미함

 

JSX

• HTML처럼 생겼음 (실제로는 javascript 문법)
• ✅ className 사용 (class는 javascript 예약어라 사용 불가. css는 똑같이 적용됨)
• ⚠️ 태그는 닫아야 함
• ⚠️ 여러 태그 반환 불가 (감싸서 반환해야함)

 

3. Props

• 부모 → 자식 에게 전달하는 값

 

예시

function User({ name }) {
  return <h1>{name}</h1>;
}

<User name="김철수" />
<User name="이영희" />

<h1>김철수</h1>
<h1>이영희</h1>

 

State

• 컴포넌트가 기억해야 하는 값
• ✅ 값이 바뀌면 다시 렌더링됨

 

예시) 독립 state

import { useState } from 'react';

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

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

 

예시) 공유 state

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

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

  return (
    <div>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

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

• 부모에 state를 둠
• 자식에게 props로 내려줌

 

Hook

• React 기능을 컴포넌트 안에서 쓰게 해주는 함수
• ✅ 컴포넌트 최상단에서 호출되어야 함 (조건문, 반복문 안에서 호출 불가)
• ✅ useEffect: 외부와의 동기화
• ✅ useRef: DOM 또는 값 기억

 

예시) useEffect - API 호출

컴포넌트가 처음 화면에 나타날 때 서버에서 데이터를 가져오는 경우

import { useEffect, useState } from 'react';

type User = {
  id: number;
  name: string;
};

export default function UserList() {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    async function fetchUsers() {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data: User[] = await response.json();

      setUsers(data);
    }

    fetchUsers();
  }, []);

  return (
    <div>
      <h1>사용자 목록</h1>

      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

• 컴포넌트가 화면에 나타난 뒤 실행됨

 

예시) useEffect - title 동기화

브라우저 탭 제목을 count 값과 맞추는 경우

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    document.title = `클릭 횟수: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 {count}번
    </button>
  );
}

• count 변수가 달라질때마다 실행됨

 

예시) useRef - DOM 직접 잡기

input에 자동 포커스 주기

import { useRef } from 'react';

export default function InputFocus() {
  const inputRef = useRef<HTMLInputElement | null>(null);

  function handleFocus() {
    inputRef.current?.focus();
  }

  return (
    <div>
      <input ref={inputRef} placeholder="이름을 입력하세요" />
      <button onClick={handleFocus}>input 포커스</button>
    </div>
  );
}

 

 

예시) useRef - 렌더링 횟수 세기

import { useRef, useState } from 'react';

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

  renderCount.current += 1;

  return (
    <div>
      <p>count: {count}</p>
      <p>렌더링 횟수: {renderCount.current}</p>

      <button onClick={() => setCount(count + 1)}>
        count 증가
      </button>
    </div>
  );
}

• 렌더링 사이에서도 값을 유지하지만, 값이 바뀌어도 리렌더링은 발생시키지 않는 경우

 

출처

• react - 공식 메인 소개
• react - 빠르게 시작하기