React는 많은 자바스크립트 라이브러리 중 가장 인기있는 라이브러리이다.
내가 React를 처음 접했을 때는 정말 신기하고 재밌었다.
자바스크립트의 구체적인 지시가 필요한 명령형이 아닌 선언적 접근 방식이라는 점에서 처음에는 정말 이 코드가 정상적으로 돌아갈까? 했던 적도 있었던 기억이있다.
블로그를 시작하면서 자바스크립트를 모두 정리한 다음에 리액트를 정리하려했지만,
하나만 계속 하려니 금방 지겨워져서 리액트와 같이 정리하려 한다.
이 글에서 알아볼 것
- React란? 왜 사용하는가?
- 컴포넌트
- JSX
- React 작동 방식
- props
1. React란? 왜 사용하는가?
- React란?
- 사용자 인터페이스를 구성하는 자바스크립트 라이브러리이다.
- 왜 사용하는가?
- HTML&CSS&JS를 통한 구축보다 좀더 간단히 사용자 인터페이스를 구축할 수 있기 때문이다.
여기서 말하는 간단히 사용자 인터페이스를 구축한다는 것이 정확히 무엇일까?
그것을 알기 위해서는 컴포넌트에 대해서 알아봐야한다.
2. 컴포넌트
리액트는 간단히 사용자 인터페이스를 구축하기 위해 "컴포넌트"를 도입하였다.
다르게 말하면, 리액트는 컴포넌트가 전부이다(리액트로 구축한 인터페이스는 모두 컴포넌트로 구성되어있다)
- 컴포넌트란?
- 사용자 인터페이스에서 “재사용”할 수 있는 빌딩 블럭
- 스타일을 위한 HTML&CSS + 로직을 위한 Js = 컴포넌트
- 그래서 컴포넌트의 무엇때문에 간단히 구축 가능한가?
- 재사용성
- 기존에 html & css & js로 짜던 코드를 생각해보면 반복되는 코드가 발생하거나, 하나의 로직을 여러군데 사용하고 싶은 적도 있었다.(함수로 어느정도 해결할 수 있지만, 한계가 존재한다)
- 우려사항의 분리
- 하나의 스크립트파일에 모든 로직을 넣는 것이 아닌, 하나의 컴포넌트에는 하나의 기능에 집중시켜 각 컴포넌트들의 역할을 분명히 해주는 것이다.
- 재사용성
3. JSX
function App() {
return (
<div>
<h2>Let's get started!</h2>
</div>
);
}위의 코드가 JSX 코드이다.
JSX코드란 JavaScript XML이며, 말 그대로 자바스크립트 코드 안에 html 코드가 존재하는 형태다.
리액트는 이런 JSX코드를 사용하고, 이것들로 구성된것이 컴포넌트이다.
4. React 작동 방식
우선 알아야할 것은 리액트는 "선언형 방식"을 사용한다는 것이다.
- 명령형 방식(Js)
- 정의한 코드들을 사용자 인터페이스에 어떤 위치에 삽입되어야하는지 구체적인 지침을 알려줘야한다
- 선언형 방식(React)
- 원하는 최종상태(목표상태)를 정의하면, 그 후 어떤 위치에 삽입,삭제,수정등은 React가 해준다
즉, 리액트는 개발자가 코드를 작성하고 최종상태를 정의하면, 그것을 평가하여 적절한 위치에 삽입한다.
여기서 말하는 최종상태는 뭐고, 적절한 위치는 뭘까?
적절한 위치가 무엇인지 알려면 리액트 프로젝트 구성 파일을 살펴봐야한다.
리액트 프로젝트를 처음 열어보면 파일이 몇가지 있고,
그 중 index.js파일의 내용은 다음과 같다
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);하나하나 살펴보면
- import ReactDOM from 'react-dom/client';
- react-dom이라는 패키지에서 ReactDOM이라는 객체를 임포트해온다
- ReactDOM.createRoot
- 개발자가 작성한 react 코드가 로딩되는 웹페이지 어느 곳에 위치해야하는지 알려준다
- root.render(<App />);
- 루트로 설정된곳에 무엇이 렌더링되어야하는지 알려준다
여기서 말하는 어느곳 = 위에서 말한 적절한 위치인데,
이는 index.html 파일에 존재한다.
index.html은 리액트 프로젝트에서 브라우저에 유일하게 렌더링되는 파일이다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>id가 root인 <div>태그 안에 우리가 작성한 리액트 코드들이 적절하게 변형되어 들어가는것이다.
또다른 의문점인 최종상태란
function App() {
return (
<div>
<h2>Let's get started!</h2>
</div>
);
}
export default App;return문 안에 html코드이다
정리하면, React는 중첩된 컴포넌트들로 이루어져 있으며, 이러한 컴포넌트들은 JSX 코드로 작성되어 있다.
JSX 코드는 자바스크립트 코드안에 HTML 코드가 존재하는 형식인데, 여기서의 HTML코드가 리액트의 최종목표, 즉 렌더링 대상이다.
결과적으로, 최종목표(html) → 상위 컴포넌트1 → 상위 컴포넌트2 …→ App 컴포넌트 → index.js → index.html
5. props
컴포넌트는 인스턴스별로 독립적이라, A라는 컴포넌트에 저장된 데이터를 B라는 컴포넌트에서 사용할 수 없다
그렇다면 데이터를 어떻게 이동시킬까?
//App.js
const expense = [
{ title: "Messi", amount: 650, date: new Date(2023, 6, 30) },
{ title: "Pedri", amount: 1050, date: new Date(2025, 6, 30) },
{ title: "Dejong", amount: 650, date: new Date(2024, 6, 30) },
{ title: "Gavi", amount: 650, date: new Date(2024, 6, 30) },
];
return (
<Fragment>
<ExpenseItem expense={expense}></ExpenseItem>
</Fragment>
);
// ExpenseItem.js
const ExpenseItem = (props) => {
return (
<div className="expense-item">
<div>{props.expense[0].date.toISOString()}</div>- 데이터를 전달하려는 상위 컴포넌트에서 컴포넌트 속성으로 데이터를 전달 <ExpenseItem expense={expense}></ExpenseItem>
- 하위컴포넌트에서는 해당 값을 props으로 받음 const ExpenseItem = (props) => (꼭 이름이 props일 필요없지만, 보통 props으로 한다..)
props과 관련된 개념이 하나 더 존재하는데,
여러 컴포넌트를 구성하다 보면 중복되는 요소가 생기기 마련이다. 이러한 중복을 최대한 효율적으로 관리하기 위해서 컨테이너 컴포넌트를 활용하면 효과적이다.
예를들어 A컴포넌트 css에도 color: red;이 존재하고, B컴포넌트 css에도 color: red;가 존재한다면,
이를 컨테이너 컴포넌트로 묶을 수 있다.
즉, 여러 컴포넌트에 공통되는 로직 또는 스타일을 갖는 새로운 컴포넌트를 생성하고, 그것으로 감싸는 것이다
const Card = (props) => {
return <div className="card">{props.children}</div>;
};
<Card className="expense-item">
<ExpenseDate date={props.date}></ExpenseDate>
<div className="expense-item__description">
<h2>제품명</h2>
<div className="expense-item__price">$251.2</div>
</div>
</Card>여기서 props.children이란
- 감싼 컴포넌트 안에 내용을 받아드리는 키워드이다
또한 컨테이너 컴포넌트를 사용할때 주의점은 스타일인데,
const Card = (props) => {
const classes = "card " + props.className;
return <div className={classes}>{props.children}</div>;
};이 처럼 사용하자
'OLD > React' 카테고리의 다른 글
| [React] React에서 사용자 입력을 컨트롤 하는 두 가지 방법 (state vs ref) (0) | 2023.02.26 |
|---|---|
| [React] React 여러 기능들 (Fragment, Portal) (0) | 2023.02.25 |
| [React] React "key" prop (react에서 배열 활용 시 발생하는 Warning 해결하기) (0) | 2023.02.24 |
| [React] React 스타일링 하는 방법 3개 (인라인&일반CSS, styled-components, CSS 모듈) (0) | 2023.02.23 |
| [React] React에서 데이터를 활용하는 방법(state, 입력값 컨트롤, 이전 데이터 활용, 데이터 끌어올리기) (0) | 2023.02.21 |
