React to CodingApple

코딩애플 강의를 통해 배운 리액트를 정리한 글입니다.

📅 작성일

2025년 1월 31일

---

📌 목차

1. 소개
2. part1-1 : React 배우기 전에 쓰는 이유부터 알아야
3. part1-2 : React 설치와 개발환경 셋팅
4. part1-3 : React에서 레이아웃 만들 때 쓰는 JSX 문법 3개
5. part1-4 : 중요한 데이터는 변수말고 state에 담습니다
6. part1-5 : 버튼에 기능개발을 해보자 & 리액트 state 변경하는 법
7. part1-6 : array, object state 변경하는 법
8. part1-7 : Component : 많은 div들을 한 단어로 줄이고 싶으면
9. part1-8 : 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)
10. part1-9 : map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때
11. part1-10 : 자식이 부모의 state 가져다쓰고 싶을 때는 props
12. part1-11 : props를 응용한 상세페이지 만들기
13. part1-12 : input 1 : 사용자가 입력한 글 다루기
14. part1-13 : input 다루기 2 : 블로그 글발행 기능 만들기
15. part1-14 : class를 이용한 옛날 React 문법
16. part1-15 : 만든 리액트 사이트 build & Github Pages로 배포해보기
17. 참고 자료

---

📝 소개

Part 1 : 블로그 제작 & 기초 문법

---

💡 part1-1 React 배우기 전에 쓰는 이유부터 알아야

🔹 리액트를 사용하는 이유

1️⃣ Single Page Application

• 새로고침 없이 앱처럼 부드럽게 동작하는 html 페이지 구현
• 생 자바스크립트로도 구현 가능하나 코드가 길어지는 단점

2️⃣ 추가 장점

• html 재사용이 편리
• React Native로 앱 개발 가능

---

🛠️ part1-2 리액트 React 설치와 개발환경 셋팅

🔹 필수 설치 항목

1️⃣ 개발환경 세팅

• nodejs 설치하기
• vscode 설치하기

2️⃣ 프로젝트 생성

#리액트 신버전부터 업데이트가 안되고 있어서 사용을 하지 않는다
npx create-react-app

npm create vite@latest
# 명령어 입력 후 나오는 프로젝트명 및 옵션 선택

# 오류 발생시
Set-ExecutionPolicy Unrestricted
npm install -g npm
npm cache clean --force

3️⃣ 실행 방법

#npm create vite@latest인경우
npm run dev

#npx create-react-app인경우
npm start

🔹 주요 개념 설명

1️⃣ node.js

• 원래 자바스크립트는 브라우저안에서만 실행이 가능하였지만 node.js로 인해실행이 가능해짐
• 즉 브라우저 외부에서 자바스크립트 실행 가능한 엔진이다
• npm(자바스크립트 라이브러리 관리도구) 포함

2️⃣ vite

• 빌드/번들링 툴
• 소스코드 압축 및 변환
• react vue등의 프레임워크 등을 생 자바스크립트로 변환해준다
• 빠른 미리보기 지원

🔹 폴더 구조

• node_modules: 라이브러리 소스코드
• public: 데이터파일 이미지파일 등 쓸데없는 파일 보관소 (여기 넣으면 나중에 사이트 발행시 원본 보존가능)
• package.json: 라이브러리 기록
• 어쩌구.config.js: lint, vite 설정 파일
• index.html: 메인페이지

---

🎨 part1-3 리액트에서 레이아웃 만들 때 쓰는 JSX 문법

🔹 JSX 개념

• js 파일에서 html 작성을 돕는 언어
• 리액트의 기본 문법

🔹 주요 문법

1️⃣ class 작성

className="클래스명"

2️⃣ 데이터 바인딩

{데이터명}

3️⃣ 스타일 적용

style={{color: 'red'}}
// -기호 사용 불가

---

💾 part1-4 중요한 데이터는 변수말고 state에 담습니다

🔹 JSX 규칙

• return() 내부는 하나의 태그로 묶어야 함

🔹 useState

1️⃣ 사용 목적

• 값이 변경됬을 때 자동으로 html에 렌더링 되도록 하기위해 사용
• state값이 쓰여진 html의 데이터는 자동 재렌더링이 된다

2️⃣ 사용법

import { useState } from 'react';
let [데이터, 데이터변경함수] = useState(초기값);

---

🔧 part1-5 버튼에 기능개발을 해보자 & 리액트 state변경하는 법

🔹 Warning 관리

• 변수를 사용하지 않음 등의 자잘한 오류가 생기는 경우 나타남

warning 메시지를 없애려면

/* eslint-disable */
// 파일 최상단에 작성

🔹 onClick 이벤트

클릭 이벤트

// 함수 호출
onClick={함수명}

//기능 실행
onClick={() => {실행할 코드}}

🔹 state 값 변경

let [a, b] = useState(1);
b(2); // state 값 변경 방법

---

🔄 part1-6 array, object state 변경하는 법

🔹 array object수정

• array object 를 변수에 담을 때는 램에 있는 array object값을 담는게 아닌 그것을 가리키는 화살표같은걸 담는거다
  그래서 원래 state값은 변경이 되지 않으면 재 렌더링이 안되는데, 화살표가 가리키는 array object값은 바뀌었지만 화살표가 바뀐게 아니기 때문에 화면 재렌더링이 안되는거임

• 자세한건 javascript reference data type참조

// copy와 기존 글제목 state는 똑같다고 생각하기 때문에 (화살표가 똑같아서) state 변경을 안해줍니다.
let copy = 글제목;
copy[0] = "여자코트 추천";
글제목변경(copy);

//화살표가 달라지는 문법이라 이러면 잘됨
let copy = [...글제목];
copy[0] = "여자코트 추천";
글제목변경(copy);

---

🧩 part1-7 Component : 많은 div들을 한 단어로 줄이고 싶으면

🔹 1. 컴포넌트란?

• 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법

🔹 2. 컴포넌트 만드는법

• function을 만든다
• return()안에 html을 담는다
• <함수명></함수명> or <함수명/>을 쓴다

🔹 3. 컴포넌트 언제 쓰는지

• 반복적인 html 축약
• 큰 페이지들
• 자주 변경되는 것들

//모달
<Modal></Modal>;

//모달 컴포넌트
function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

🔹 4. 컴포넌트 단점

• state를 가져다 쓸 때 문제가 생김

🔹 5. 그 외

• fragment <></> 와같이 의미없는 태그를 뜻함

function APP() {
  return (
    <>
      <div>1</div>
      <div>2</div>
    </>
  );
}

---

🎯 part1-8 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)

🔹 1. 동적 UI만드는 스텝

• UI 디자인 완성
• UI 현재 상태를 state에 저장
• state에 따라 UI가 어떻게 보일지 작성

🔹 2. 요소 show hide처리

// useState는 작명, set작명 이렇게 적는게 관습입니다
let [변수1, set변수1] = useState(false)
{
변수1 ? 요소 : null
}
=> 이렇게 요소를 show hide시킬 수 있다

---

🔄 part1-9 map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때

🔹 1. map

• array 자료 갯수만큼 함수안의 코드 실행
• 함수안의 파라미터는 array안의 자료

{
    array.map (function(item, index) {
        return (
            <div key={index}>{item}</div>
        )
    }
}

🔗 part1-10 자식이 부모의 state 가져다쓰고 싶을 때는 props

🔹 1. props

• 부모컴포넌트에서 자식컴포넌트로 state값을 전달할 수 있다

🔹 2. props사용법

<자식컴포넌트 작명={state}>
function 자식컴포넌트 (props) {
    return (
        {props.state}
    )
}
//부모에서 자식에게만 전송이 가능 (패륜 불륜안됨)

---

📄 part1-11 props를 응용한 상세페이지 만들기

🔹 1. 상세에 데이터를 넘겨줄 때

• 하나의 오브젝트 or 하나의 배열만 보내거나

• index도 같이 보내야함
  => 뭐가 좋을지 상황에 맞춰서 사용하자

• 자식과 부모가 같이쓰는 state라면 부모에 올려놓고 자식이 props로 받아쓰는게 좋다

<자식컴포넌트 작명={state}>
function 자식컴포넌트 (props) {
    return (
        {props.state}
    )
}
//부모에서 자식에게만 전송이 가능 (패륜 불륜안됨)

---

⌨️ part1-12 input 1 : 사용자가 입력한 글 다루기

🔹 1. input

//값 가져오기
onChange={(e) => {e.target.value}}

🔹 2. 이벤트 버블링

• 이벤트가 상위요소로 퍼지는 현상
• e.stopPropagation 사용하면 안퍼짐

onClick={(e) => {e.stopPropagation(); ~기능}}

🔹 3. 변경 시차

• state변경 시차가 있음, 그래서 변경 후 다음에 바로 콘솔찍으면 변경안된게 출력됨

---

📝 part1-13 input 다루기 2 : 블로그 글발행 기능 만들기

🔹 1. 배열에서 삭제

변수.splice(index, 1);

🔹 2. 배열에서 맨 앞에 추가

변수.unshift(입력값);

---

📚 part1-14 class를 이용한 옛날 React 문법

🔹 1. 오늘의 결론

• 컴포넌트 만들 일이 있으면 class는 복잡하니까 function 씁시다.
  근데 개발하다보면 예전 리액트프로젝트같은거 봐야하는 경우가 있습니다.
  그럴 때 class 컴포넌트 나올텐데 당황하면 뉴비티가 나기 때문에
  고수인 척 하고 싶으면 참고로 알아둡시다.

---

🚀 part1-15 만든 리액트 사이트 build & Github Pages로 배포해보기

🔹 1. 빌드하기

1. npm run build
2. 깃허브에서 프로젝트명..github.io 로 해줘야함
   => 이제는 pages 들어가서 source를 main으로 바꿔주자
3. build안에 있는거 올림

🔹 2. 첫 페이지를 빠르게 동작시키려면

• lazy 함수

📚 참고 자료

• 코딩애플 강의
• 내 깃허브