리액트 탄생
페이스북은 동시대 나온 서비스 중 유독 인터렉션(상호작용)이 많았다.
상호작용이란 좋아요, 채팅처럼 양방향으로 소통하는 기능이다.
당시에는 정적인 웹을 개발하는 데에 초점을 두었기 때문에 이를 다루기 어려웠다.
그래서 리액트가 탄생했다.
리액트 특징 3가지
1. 컴포넌트 사용 : 재사용이 필요한 애들을 컴포넌트로 사용하기 때문에 코드가 유연해진다.
2. 간단한 업데이트 : 자동차가 고장나면 고장난 부분을 찾아서 고치는 게 아니라 아예 새차로 바꾸는 방식이라서 간단하다.
3. 빠른 업데이트 : 버츄얼 돔을 이용해서 업데이트 사항을 모아뒀다가 한번에 실제 돔을 업데이트한다.
Recap: DOM과 랜더링
웹에서 페이지를 업데이트하려면 DOM을 조작해야한다.
돔은 HTML 코드를 트리로 변환한 구성물이다.
돔은 브라우저가 HTML 코드를 랜더링하기 위해 만든다.
랜더링은 브라우저가 코드를 실제로 화면에 그려내는 과정이다.
랜더링 과정은
1. HTML -> DOM // CSS -> 스타일 규칙
2. 렌더 트리 라는 걸로 합침
3. 레이아웃 : 요소 위치를 픽셀 단위로 계산 (오래 걸림)
4. 페인팅 : 실제 화면에 그림 (오래 걸림)
리액트 프로젝트 만들기
npx create-react-app . // 패키지를 설치할 필요가 없기 때문에 npx를 쓴다.리액트 앱의 구성요소
create-react-app으로 리액트 앱을 만들었기 때문에 Node.js 패키지이다.
그래서 Node.js 패키지 구성 파일이 있다.
node_modules 폴더 : 설치한 패키지들이 있다. 용량이 커서 이 폴더는 빼고 공유한다.
public 폴더 : 리액트에서 공통으로 사용하는 폰트, 이미지 등을 저장한다.
src 폴더 : 프로그래밍 소스를 저장한다. 우리가 쓰는 코드들.
package-lock.json : 정확한 패키지 버전 정보가 있다.
package.json : 프로젝트 이름, 스크립트 코드, 패키지 버전의 범위 등의 정보가 있다.
리액트 앱 실행
npm run start // package.json에 스크립트를 보면 "start": "react-scripts start"라고 나와있다.리액트 앱 서비스 요청 시 동작 과정
1. 리액트 앱 서버가 public 폴더의 index.html을 보낸다.
2. index.html는 bundle.js을 실행한다.
3. bundle.js에서 src 폴더의 index.js와 이 파일이 불러온 모듈을 실행한다.
4. index.js에서 createRoot 메서드를 통해 리액트 가상돔의 루트를 지정한다.
render 메서드를 통해 컴포넌트들을 렌더링한다.
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App'; // App.js에 있는 App 컴포넌트를 가져온다.
// createRoot 메서드 : 인수로 전달한 요소를 리액트 앱의 루트로 만들어 반환한다.
// 여기서는 index.html 안에 있는 id가 'root'인 요소를 루트로 지정했다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);JSX
JSX는 자바스크립트 XML이란 뜻이다.
공식 문법은 아니지만 리액트 공식 문서에서도 사용하는 문법이다.
JSX를 쓰면, HTML 태그에서 자바스크립트의 표현식(값으로 평가되는 식)을 직접 사용할 수 있다.
참고로 불리언은 표현식으로 직접 출력을 못하니, 문자열로 반환해야한다.
또한 객체도 직접 출력 못한다.
function Body() {
const name = "양나빈";
return <div>{name}</div>;
}
export default Body;반환도 한 태그만 해야하고,만약 여러개를 반환하고 싶으면 React.fragment로 감싸준다.
조건부 랜더링은 삼항연산자 사용과 if문 사용이 있다.
각각 장단점이 있는데, 삼항연산자는 간단하지만 else if 를 못 쓰고, 많아질 경우 가독성이 떨어진다.
if문은 가독성은 좋은데 코드가 중복이 될 수 있다.
상황에 맞추어 선택해야한다.
Props
Props는 Properties의 줄임말로, 부모가 자식 컴포넌트에 전달하는 객체이다.
단일 객체 형태로 전달한다.
<Body name={name} age={age}/> // 이렇게 따로따로 쓸 수도 있지만
<Body {...props}/> // 한 객체를 스프레드로 나눈 다음 다시 묶어서 보낼 수도 있음.
<Body>
<Child/> // 이렇게 안에 컴포넌트를 넣으면 children 이란 이름으로 props에 넣어져서 보내진다.
</Body>리액트 앱 개발 전 생각할 부분
1. 요구사항을 정밀하게 분석하기 (이 과정 안 거치면 중간에 코드를 수정해야함 ㅠ)
2. 컴포넌트 단위로 생각하기 ("하나의 컴포넌트는 단 하나의 역할만 수행한다.")
'react' 카테고리의 다른 글
| useDeferredValue를 쓰는 이유 (0) | 2025.06.22 |
|---|---|
| 리액트 훅 정리 (0) | 2025.04.30 |
| state 실습 (0) | 2025.04.30 |