[React]React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지 ①

섹션 2. 프로젝트 이해하기

-프로젝트 생성

1. Create React App(CRA) 이용
2. npx create-react-app cra-react-app
3. Vite 이용

npm create vite@latest
cd vite-react-app 
npm i 
npm run dev

 

→차이점 : CRA로 만든 프로젝트는 Webpack 기반으로 빌드 진행, Vite는 비트 기반으로 진행,

그러나 React문법은 어떤 방법으로 진행하든 동일

 

 

-React 프로젝트 구조

public과 asset의 차이점 정리

구분	public/	src/assets/
접근 방식	절대 경로 (/) 사용	import 필요
빌드 시	파일 변경 없음	Webpack이 최적화 및 해시 추가
사용 예시	favicon, meta 이미지, SEO용 파일	컴포넌트 내부에서 쓰는 이미지
장점	빠른 로딩, 직접 접근 가능	모듈처럼 사용 가능, 최적화 지원
단점	import 불가, 빌드 최적화 X	절대 경로 사용 불가능

 

• 정적 파일을 그대로 유지해야 할 때 → public/
• React 코드에서 직접 불러와야 할 때 → src/assets/

 

 

-CSR, SPA, 진입점, 루트 컴포넌트

• CSR : Client Side Rendering의 약자로, 클라이언트 측에서 페이지를 렌더링하는 방식을 의미
• SPA : Single Page Application의 약자로, 단일 페이지 응용 프로그램을 의미
• main.jsx : 애플리케이션의 진입점을 나타내는 파일
• 주로 App.jsx 또는 App.js 파일인 루트 컴포넌트는 애플리케이션의 주요 컴포넌트로, 최상위 컴포넌트
• 루트 컴포넌트를 둘러싼 StirctMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 리액트 컴포넌트로, 개발모드에서만 활성화됨

 

섹션 3. 컴포넌트 이해하기

-컴포넌트란?

• 컴포넌트 : UI를 구성하는 독립적이고 재사용 가능한 조각, HTML(정확히는 JSX)를 반환하는 함수를 작성
• 컴포넌트 정의할 때는 파스칼 케이스(PascalCase) 명명 규칙을 따름
• 컴포넌트를 분리하는 기준
  1. 재사용성 : 반복적 사용 용이
  2. 단일 책임 원칙(SRP) : 컴포넌트가 하나의 역할을 수행 →코드의 이해도와 유지보수성↑
  3. 가독성
•  컴포넌트를 UI에 보여주기 위해 렌더링 시킬 위치에 import해서 사용함

 

-컴포넌트 만들기

• 1단계 : 컴포넌트 내보내기(export default)
• 2단계 : 함수 정의하기
• 3단계 : 마크업 추가하기 (**마크업 : HTML 같은 웹 페이지의 구조를 정의하는 코드)

함수 표현식 : 변수에 함수를 할당하는 방식

const myFunction = function() { 
// 함수 내용 
};  →export (default빼고) 사용 가능


const myFunction = () => { 
// 함수 내용 
};

 

함수 선언식 : function 키워드와 함수 이름을 사용하여 함수를 정의

function myFunction() { 
    // 함수 내용 
    }   →export default 사용 가능

 

 

-컴포넌트 import & export

컴포넌트를 다른 파일로 이동하기 위한 세 가지 단계

1. 컴포넌트를 추가할 JS 파일을 생성
2. 새로 만든 파일에서 함수 컴포넌트를 export (default 또는 named export 방식을 사용)
3. 컴포넌트를 사용할 파일에서 import  (적절한 방식을 선택해서 default 또는 named로 import)

 

섹션 4. JSX학습

-JSX란?

• Javascript XML의 약어로 Javascript를 확장한 문법이다. JavaScript함수를 활용하여 HTML을 렌더링해서 컴포넌트 만듦.
• Jsx문법을 사용할 땐 하나의 루트 엘리먼트로 반환해야한다( JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환된다. 하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없다.)
• Jsx태그는 명시적으로 닫아주어야함    <img class="course__img" src="./img/htmlcss.png" alt="" />
• JSX는 JavaScript변수명으로 사용해도 되는 카멜 케이스로 작성해야함

 

-JSX에서 JavaScript 사용하기

• JSX를 사용하면 JavaScript 파일에 HTML 마크업 뿐만 아니라 비즈니스 로직도 작성할 수 있다.
  1. HTML 마크업 (Markup)
     • 화면에 표시되는 구조
     • <div>, <h1>, <button> 같은 HTML 태그로 이루어짐
     • React에서는 JSX를 사용해서 HTML처럼 보이지만, 내부적으로는 JavaScript 코드로 변환됨
  2. 비즈니스 로직 (Business Logic)
     • 화면이 동적으로 변화할 수 있도록 처리하는 코드
     • 데이터를 가져오거나, 가공하거나, 상태를 변경하는 로직
     • React에서는 보통 상태(state) 관리, 이벤트 처리, API 호출 등이 포함됨
• JSX에서 엘리먼트 속성에 문자열을 전달하기 위해서는 ''(작은따옴표)나 ""(큰따옴표)로 묶어야 한다
• javaScript변수를 속성에 전달할 때는 {} (중괄호)로 묶어야함, 자바스크립트 표현식도 나타낼 수 있음
• 마크업 내에서 객체 자체를 사용하면 오류( 객체의 속성을 가져오면 정상 작동)

 

JSX와 React는 서로 다른 별개의 개념입니다. 종종 함께 사용되기도 하지만 독립적으로 사용할 수도 있습니다. JSX는 확장된 문법이고, React는 JavaScript 라이브러리입니다.

 

 

-이중 중괄호 사용하기

•  {name:’민주’, age:23} 같은 객체값을 속성에 전달하려면 이중 중괄호로 감싸서 전달해야함
• JSX에서 전달할 때 사용하는 중괄호 1개 + 객체 의미하는 중괄호 1개

 

섹션 5. 컴포넌트 기초

-컴포넌트에 props전달하기

• props : JSX 태그에 전달하는 정보

1.  자식 컴포넌트에 props전달하기
2.  자식 컴포넌트 내부에서 props읽기

• React 컴포넌트는 props를 이용하여 서로 통신함. (부모 컴포넌트가 자식에게 정보 전달)
• Props는 객체, 배열, 함수를 포함한 모든 javaScript값을 전달함
• 구조분해 할당 (Destructuring) : 객체에서 특정 값을 쉽게 꺼내서 변수로 사용할 수 있도록 해주는 문법. 보통 props를 받을 때 props.값 형태로 사용하지만 { name } 을 구조분해 할당하여 props.name 대신 name만 사용하는 식으로 필요한 값만 꺼내서 사용  

         function Avatar({ person, size }) { // ...}  ← props를 선언할 때 ()안에 {} 잊지 말기!!!!

 

 

- JSX spread 문법으로 props 전달하기

• Spread 문법(전개 연산자, ...) :  배열, 객체 등의 값을 개별 요소로 펼쳐서 사용할 수 있게 해주는 JavaScript 문법
• 코드의 간결함이 중요할 때만 사용하기!

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

 

 

-콘텐츠로 컴포넌트 전달하기

• JSX 태그 내에 콘텐츠를 중첩하면, 부모 컴포넌트는 해당 콘텐츠를 children이라는 prop으로 받음
• 내부에서 무엇이 렌더링 되는지 “알” 필요는 없다

 

-조건부 렌더링

• if문과 return문
• 삼항 조건 연산자( ? : )
• 논리 AND연산자 (&&)

 

-리스트 렌더링

배열에서 항목 리스트를 생성하는 방법

1. 데이터를 배열로 이동
2. 배열의 요소를 새로운 JSX 노드 배열에 매핑
3. <ul>로 래핑된 컴포넌트의 새로운 JSX 노드 배열을 반환

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

const listItems = people.map(person => <li>{person}</li>);

return <ul>{listItems}</ul>;

 

※map() 호출 내부의 JSX 엘리먼트에는 항상 key가 필요함

• Key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 일치시킬 수 있도록 함. 이는 배열 항목이 정렬 등으로 인해 이동하거나 삽입되거나 삭제될 수 있는 경우 중요해진다.
• key를 잘 선택하면 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리에 올바르게 업데이트 하는데 도움이 됨

 

섹션 6. State 기초

-State: 컴포넌트의 기억 저장소

const [state, setState] = useState(initialState)

• React에서 데이터가 변경되었을 때 렌더링을 유지할 수 있도록 useState함수를 제공함
• React에서 useState와 같이 “use”로 시작하는 모든 함수들을 “훅”이라고 부름
• useState는 Hook이므로 컴포넌트의 최상위 레벨이나 직접 만든 Hook에서만 호출할 수 있습
• const [(컴포넌트의 상태), (상태를 변경할 수 있는 함수)]=useState(초기값);
• 컴포넌트 인스턴스별로 관리 가능

 

-렌더링 단계 이해하기

• 렌더링 : 화면에 표시할 UI를 그리는 것. React에서 렌더링은 컴포넌트를 호출하는 것
• UI요청 & 제공 단계
  1. 렌더링 트리거 : 컴포넌트가 렌더링을 시작하게 만드는 것, 컴포넌트의 state가 변하면 리렌더링 트리거가 발생
  2. 리액트에서는 render() 메서드를 호출하여 이 작업을 실행

  import Image from './Image.js';
  import { createRoot } from 'react-dom/client';
  
  const root = createRoot(document.getElementById('root'))
  root.render(<Image />);
  

  1. 컴포넌트 렌더링 : 렌더링 트리거가 발생하면, 리액트는 해당 컴포넌트를 호출하여 화면에 표시할 내용을 파악
     1. 초기 렌더링의 경우 React는 DOM 노드를 생성
     2. 리렌더링의 경우 React는 이전 렌더링 이후 변경된 DOM 노드가 있는지 계산함
  2. DOM에 커밋 : 변경된 DOM노드가 있다면 DOM에 반영

 

-순수한 컴포넌트와 Strict 모드

• React에서 작성하는 모든 컴포넌트는 순수함수(항상 동일한 입력에 대해 동일한 출력 반환하는 함수)
• 순수하지 않은 렌더링 버그를 발견하기 위한 StrictMode로 인해 컴포넌트가 한번 더 렌더링 됨

-Shallow Copy (얕은 복사)

• 객체나 배열을 복사할 때, 1차원적인 값만 복사하고 내부의 중첩 객체(참조형 데이터)는 공유됨
• 즉, 원본과 복사본이 같은 참조값을 가짐 → 한쪽을 변경하면 다른 쪽도 영향을 받음

-Deep Copy (깊은 복사)

• 객체나 배열을 복사할 때, 모든 중첩된 값까지 새로운 메모리에 할당하여 완전히 독립적인 복사본을 생성
• 원본과 복사본이 완전히 분리되어 있어 한쪽을 변경해도 다른 쪽이 영향을 받지 않음

 

 

-스냅샷처럼 동작하는 State

state변수를 설정해도 이미 가지고 있는 state변수는 변경되지 않고, 대신 리렌더링이 발동됨

-batching, 업데이터 함수

• 예제의 setCounter를 전달하기 위해서 콜백함수 이용(업데이터 함수)
• Batching : 여러 개의 상태 업데이트를 하나의 리렌더링으로 묶어서 처리하는 것