2025-11-11(react)

홈페이지 들어가면 react 사용 한 경우 윗칸 리액트 이모티콘이 활성화됨

Reat 기초 정리

 

프로젝트 생성 명령어

npx create-react-app 프로젝트명
cd 프로젝트명
npm start

개발에 필요한 VSCode 확장프로그램

1. ESLint
   React 문법 검사기
   코드 실행 전에 문법 오류나 변수 사용 규칙 미리 체크해줌
   자바스크립트는 인터프리터 언어라, 실행해야 오류를 알 수 있는데
   설정파일: eslint.config.js

// eslint 규칙 중 사용하지 않는 변수 경고 끄기
'no-unused-vars': 'off',
'react/prop-types': 'off'

2. Prettier
    코드 포메터(Formatter)
     자동으로 들여쓰고, 세미콜론, 따옴표 등을 정리해 코드 스타일을 통일시켜줌 
     저장할 때 자동 정리 가능 (Ctrl + s) 시 자동 포맷)

3. ES7 + React/Redux/React-Native Snippets
      React 개발용 코드 스니펫 제공
      자주 쓰는 코드 템플릿을 단축어로 빠르게 입력가능

 

• rfc : 함수형 컴포넌트 생성
• rafce : 화살표 함수형 컴포넌트 export 포함 버전
• rcc : 클래스형 컴포넌트

리액트 개요

SPA (Single Page Application)

• 한 개의 HTML에서 동적으로 화면을 바꾸는 방식
• 페이지 이동 시 전체 새로고침 없이 필요한 부분만 변경됨
• React는 UI를 만들기 위한 자바스크립트 라이브러리

컴포넌트 기반 UI

• React 앱은 여러 컴포넌트(Component) 조각으로 구성됨
• 하나의 페이지도 여러 컴포넌트를 조합해서 만든다.
• 화면 일부가 변경될 때 해당 컴포넌트만 교체되어 효율적

JSX (JavaScript Syntax Extension)

JSX란?

자바스크립트 안에서 HTML 문법을 함께 사용하는 확장 문법                     

 

• JSX를 사용하면 HTML + JS가 한 파일 안에서 공존 가능
• JSX가 없다면 DOM API로 복잡하게 요소를 조작해야 함.

const user = <h1>성명: {name}</h1>;

JSX 작성 규칙   
         

하나의 엘리먼트만 리턴가능

return (
  <div>
    <h1>Hello</h1>
  </div>
);

  JS 표현식은 중괄호 {} 안에서 사용

const name = "희원"
return <h2> 안녕하세요, {name}!</h2>;

   if문 /for문은 직접 JSX에 못 씀

조건문은 삼항연산자를 사용:

{user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}

    단일 태그(Self-closing tag)는 반드시 닫기

<img src="logo.png" />
<br />

 

 

JSx 내부에서 CSS 적용 방법

방식설명

1. 내부 style 속성	JSX 안에서 직접 정의 (style={{color:'red'}})
2. 인라인 스타일	HTML 태그 속성처럼 작성
3. 외부 CSS 파일	일반 .css 파일 불러와서 사용
4. CSS 모듈	컴포넌트 단위 스타일 분리 (.module.css)

CSS 속성명 규칙

• font-size → fontSize
• background-color → backgroundColor
• 값은 문자열로 ' ' 또는 " " 로 감싸기

 

특징

항목설명

구성	React 앱은 여러 컴포넌트로 조합됨
루트 컴포넌트	App.jsx가 최상위(루트) 컴포넌트
조립 방식	HTML 페이지가 아닌 여러 컴포넌트를 조립해서 완성
자식 컴포넌트	다른 컴포넌트 안에서 불러와 사용하는 컴포넌트
컴포넌트 종류	함수형 / 클래스형 (요즘은 함수형이 주로 사용됨)
이름 규칙	항상 대문자(PascalCase) 로 시작