📍 Component
Component가 뭔데?
Component = HTML + (CSS) + JS
React는 모두 Component 기반으로 동작한다. component는 custom HTML 이라고 생각하면 된다.
Component를 사용하는 이유는?
1️⃣ reusable building blocks in user interface : 재사용성이 높기 때문에 중복된 코드를 작성할 일이 줄어든다.
2️⃣ logic을 분리할 수 있다
: 하나의 component당 하나의 기능을 넣어 분리하여 작업한다. 때문에 유지보수를 하기 편하다.
cf) atomic design
이러한 component가 모이고 모여서 전체적인 UI를 만들게 된다.
Vanilla JS와 같이 구체적인 DOM에 어느 inner HTML을 삽입하는 것이 아니라, 구체적인 목표와 상황에 따라 최종 상태를 두고 작업을 하는데, 어떤 상황에 따라 어떠한 상태가 사용되어야 하는지 정의해두면 된다.
Component 어떻게 만드는데?
Component는 HTML + JS 로 이루어져 있고 JSX를 return하는 function 이다.
JS를 이용해 logic을 만들고, 해당 logic과 관련하여 화면에 나타내고자 하는 부분들을 JSX에 작성해서 return 하면 완성!
Html 기본 태그와 이름이 헷갈릴 수 있기 때문에 Component 이름 첫글자는 대문자로 하는게 보통의 규칙이다.
📍 index.html / index.js ? 리액트 기본 동작 방법
React는 single page로 동작하기 때문에 index.html은 유일하게 react 파일에서 가질 html이다. 나머지 html 코드들은 다 jsx파일 안에 즉 component 안에 들어가서 동작하게 된다.
index.html 의 용도는 react의 component들이 어느 위치에 render되야 할 것인지 나타내기 위함이다.
index.html안에id="root"인 <div>를 만들기index.js에 코드 불러오기render를 통해 만들어둔 component들을 해당되는 위치에 배치
// index.html
...생략
<body>
...
// 1
<div id="root"></div>
</body>// index.js
import ReactDOM from 'react-dom/client';
import App from './App';
// 2. index.html의 root 불러오기
const root = ReactDOM.createRoot(document.getElementById('root'));
// 3. App component를 render 하기
root.render(<App />);
📍 JSX = JavaScript XML
jsx는 react가 rendering 될 때 react에 의해 다른 코드로 변환되어 나타난다. 즉 우리가 보기엔 HTML코드 같지만 사실은 결국 Js 코드이다.
🚨 중요한 규칙
1️⃣ jsx가 return하는 함수는 하나의 Root를 가지고 있어야 한다. 예를 들면 반환하려는 HTML 코드들이 하나의
<div> </div>로 감싸져서 return 되어야 한다.
cf) custom component는 위와같은 wrapper의 역할을 할 수 없다.
=> wrapper component로 만들어주면 해결 가능 (children)2️⃣ tag에 class를 줄 때는
className = ""를 사용한다.
3️⃣ JSX 내부에 js 코드, 변수에 저장된 값 등을 작성하려는 경우, { } 안에 작성한다.
4️⃣ JSX 내부에 작성한 {} 안에 든 js 코드 속 화살표 함수는 평소 JS처럼(() => {})이 아닌 (() => ()) 로 사용한다. 즉{}가 아닌 ()를 사용한다!
5️⃣ JSX는 꼭 return에만 위치할 수 있는 건 아니다. JS 변수에 JSX코드를 할당할 수 있다.let jsxVariable = <p>hello</p>;
JSX를 동적으로 만들기
component는 재사용성이 가장 중요하다. JSX안에서 화면에 출력하고자하는 요소들을 하드코딩하기보단 (ex.
<div>안녕하세요!</div>)
데이터를 받아와서 동적으로 작성하는게 가장 바람직하다.
📍 데이터를 어떻게 받아오는데? ➡️ Props
props는 component간 데이터 전달을 하는 역할을 한다. 다른 component 내에 저장된 value값 혹은 여타 data 들을 props를 통해 받아올 수 있다. component tree 구조를 따라서 props를 밑으로 전달한다고 생각하면 된다.
Props 사용법?
📁 데이터 전달하는 파일
이와같이 데이터를 저장한 파일 (App.js라 하자) 안에서 component (ExpenseItem)을 부를 때, attribute로 prop들을 전달해준다.
// App.js
<ExpenseItem
title={expenses[0].title}
amount={expenses[0].amount}
date = {expenses[0].date}
/>📁 데이터를 전달 받는 파일
그렇다면 데이터를 사용하고자 하는 파일 (ExpenseItems.js라 하자)에서 전달받은 prop을 어떻게 사용할까?
component는 결국 함수라는 것을 기억하자. 그 말은, 내가 작성한 component는 parameter를 가질 수 있다는 것이다. 즉, parameter로 전달한 props를 받아오면 된다.
여기서 props는 전달한 모든 데이터를 담고 있는 객체이다. 즉 key-value로 전달받게 된다.
// EspenseItems.js
function ExpenseItem(props) {
return (
<div>
<h2>{props.title}</h2>
</div>
)
}📍 Children?
custom component의 사이에 있는 모든 값들이 custom component의 chlidren 값으로 들어간다.
wrapper component
jsx가 return하는 함수는 하나의 Root를 가지고 있어야 한다. 예를 들면 반환하려는 HTML 코드들이 하나의
<div> </div>로 감싸져서 return 되어야 한다.
해당 규칙에 따르기 위해 우리가 만든 component를 html 태그처럼 사용하기 위해 내부에 {children}을 넣어 wrapper component를 만들게 된다.
wrapper component의 장점은 content를 감싸는 카드와 같은 형식에 공통으로 적용되는 CSS 코드의 중복을 없앨 수 있다는 점이다.
ex) <Card> <Card/> 사이의 content들이 Card component의 children값으로 들어가게 되므로 <Card> <Card/>는 JSX의 wrapper 역할을 할 수 있게 된다.
// Card.js
function Card(props) {
return <div className="card">{props.children}</div>;
}// ExpenseItem.js
...
return (
<Card className='expense-item'>
<ExpenseDate date={props.date}/>
<div className='expense-item__description'>
<h2>{props.title}</h2>
<div className='expense-item__price'>${props.amount}</div>
</div>
</Card>
)
}