1. 리액트란?

React는 사용자 인터페이스 구축에 널리 사용되는 JavaScript 라이브러리이다. Facebook에서 만들었으며 현재 대규모 개발자 커뮤니티에서 유지 관리하고 있다. React를 사용하면 복잡한 사용자 인터페이스를 생성하도록 구성할 수 있는 재사용 가능한 UI 구성 요소를 빌드할 수 있다.

yarn

yarn은 패키지 관리자로 프로젝트의 종속성을 관리하는 데 도움이 되는 도구이다.

vite

Vite는 빠른 개발 피드백과 프로덕션에 최적화된 빌드를 제공하는 빌드 도구이다. 최신 브라우저 기능을 사용하여 더 빠른 개발 경험을 제공하고, React를 포함한 다양한 프레임워크와 함께 사용할 수 있다.

2. yarn과 vite로 React 프로젝트 시작하기

새 React 프로젝트 생성

$ yarn create vite { 프로젝트 이름, 현재 폴더일 경우 . } --template react

$ cd { 프로젝트 이름 }

$ yarn

3. React Primitive

React Primitive는 React 구성 요소이다. 여기에는 div, span 및 input과 같은 기본 HTML 요소가 포함되며, JavaScript 파일에 HTML과 유사한 코드를 작성할 수 있게 해주는 JavaScript의 구문 확장인 JSX를 사용하여 React 프리미티브를 생성할 수 있다.

예시

const App = () => {
  return <div>
    Hello, world!
  </div>
}

4. Component

Component는 더 복잡한 UI를 만들기 위해 구성할 수 있는 재사용 가능한 UI 요소이다.

예시

//Greeting.jsx
const Greeting = ({ name }) => {
  return <div>Hello, {name}!</div>
}

Greeting component를 아래처럼 사용한다.

//App.jsx
import Greeting from 'Greeting'

const App = () => {
  return <Greeting name="world" /> //<div>Hello, world</div>
}

5. 상태(useState)

state는 React에서 데이터를 관리하는 방법이다. useState라는 React에 내장된 기본 hook으로 관리한다.

예시

//Counter.jsx
const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

useState(초기 값)과 같이 count의 초기 값을 설정해 준 뒤, count를 재할당하기 위해서 setCount(재할당 값)를 사용한다.

setCount()를 호출하여 값이 업데이트되면 다시 렌더링을 해준다.

6. useEffect

useEffect는 기본으로 내장된 React hook이다. 주로 component 외부 작업(fetch나 브라우저 제목 변경 등)의 변화에 따라 수행할 함수를 지정해줄 수 있다.

useEffect는 첫 번째 렌더링을 포함하여 렌더링될 때마다 실행된다.

예시

import React, { useEffect} from 'react'

// some codes...

useEffect(() => {
  //감시할 대상 변경 시 실행할 코드
}, [/*감시할 대상*/]);

감시할 대상을 []와 같이 빈 값으로 전달할 경우, 초기 렌더링 때 한 번만 실행하라고 알려주게 된다.

import React, { useState, useEffect } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]) //users 상태관리

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data))//응답 데이터로 변경
  }, [])//초기 렌더링 때 한번만

  return ( //map을 통해 users배열의 값을 사용하여 HTML요소로 반환
    <ul>
      {users.map(user => (<li key={user.id}>{user.name}</li>)
      )}
    </ul>
  )
}