React18 설치 및 시작 방법 및 레퍼런스링크

프론트엔드 기술스택으로 NextJS과 tailwindCSS 를 사용한다면, 웹에 대한 이해가 확실히 늘어납니다.

react 기반의 프레임워크와 UI 라이브러리를 장악한 이 기술스택은 알아두면 너무나 좋지만,

막상 react 가 없던 페이지에 react를 적용하거나 새로이 프로덕트를 react만으로 구축한다면?

NextJS에 익숙해지려는 찰나에 프레임워크 의존도를 낮추고 기본 기술인 React를 기초부터 알아두는 것이 좋다는 판단이 듭니다.

 

목차

• React 설치 및 환경 설정
  • React 프로젝트 생성
• React의 주요 기능과 개념
  • 배열 순회와 렌더링 (map)
  • 화살표 함수 (=>)
  • 상태 관리 (useState)
• 이벤트 처리
• 레퍼런스 링크

 

 

React 설치 및 환경 설정

React 프로젝트 생성

 

 

React 프로젝트도 NextJS와 마찬가지로 명령어로 생성합니다.

 

npx create-react-app react-study
cd react-study
npm start
npx create-react-app
npm start (개발 서버 실행)

 

 

이대로 react app 을 생성하면 JS 로 생성됩니다.

TS로 생성하려면 --template typescript 를 뒤에 더해줍니다.

 

이후에 브라우저에서 http://localhost:3000으로 접속합니다.

React의 주요 기능과 개념

 

 

배열 순회와 렌더링 (map)

React에서 배열 데이터를 화면에 렌더링하려면 map 함수를 사용합니다.

 

 

const skills = ["python","django"];
  return (
    <>
    <h1>{name} 시작!</h1>
    <WelcomeMsg name="hongreat" days="1" />
    <div>Board!!</div>
    <Board/>
    <Counter/>
    <ul>
      {skills.map((item,index) => <li key={index}>{item}</li>)}
    </ul>

 

item: 배열의 현재 값.
index: 배열의 현재 요소 위치.
key: React에서 요소를 추적하기 위한 고유 값 (필수).

 

화살표 함수 (=>)

React에서는 NextJS와 마찬가지로 화살표 함수를 자주 사용합니다.

 

const add = (a, b) => a + b;
React에서 map과 결합
skills.map(item =>
{item}
);

 

코드가 간결하고, 직관적입니다.

 

 

상태 관리 (useState)

 

React에서 컴포넌트 내부의 데이터를 관리하려면 useState를 사용합니다.

 

 

const [state, setState] = useState(initialValue);
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(1234);
return (
현재 숫자: {count}
<button onClick={() => setCount(count + 1)}>숫자 증가);
}
export default Counter;

 

 

상태가 변화되는 과정은 데이터가 변화된다는 것을 의미합니다.

useState(0)에서 초기값 0을 설정합니다.(변경가능 합니다.)

setCount(count + 1) 을 통해 상태 변경 함수를 call 합니다. 그 직후에 React가 상태 변경을 감지하고 UI를 다시 렌더링 합니다.

 

 

 

이벤트 처리

 

 

React에서는 대표적인 onClick과 같은 (이벤트)핸들러를 사용해서 유저의 액션을 처리합니다.
이때, 이벤트 핸들러는 함수이고, 기존 상태를 기반으로 값을 변경해야 합니다.

 

<button onClick={() => console.log("버튼 클릭됨!")}>

 

 

프론트엔드 기술스택은 최신화와 빠른 변화로 학습해야할 양이 많습니다.

하지만 공식문서에 생각보다 양질의 튜토리얼이 있어 참고하기 매우 좋습니다.

특히 각 문법의 개념들이 어떻게 쓰여지고 비슷한 것과 어떤 차별점이 있는지 설명되어 있습니다.

 

 

 

레퍼런스 링크

• 리액트 install 문서 https://ko.react.dev/learn/installation
• 리액트방식으로 사고 문서 https://ko.react.dev/learn/thinking-in-react
• 리액트 배우기 문서 https://ko.react.dev/learn