React Component
Component란?
재사용이 가능한 각각의 독립된 모듈
컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있기 때문에 UI 구축 작업을 보다 쉽게 할 수 있다.선언적 프로그래밍 : '무엇'을 나타내야 하는지를 프로그래밍으로 표현하는 것.
- 시스템을 효율적으로 관리할 수 있다!
리액트 컴포넌트를 표현하는 방법에는 함수형 컴포넌트와 클래스 컴포넌트가 있으며 함수형 컴포넌트를 사용하는 것이 더 권장되는 방법이다.
함수형 컴포넌트
import React from "react"; function FunctionComponent() {
return (
<div>
<h1>Hello</h1>
</div>
);
}JSX
Javascript를 확장한 문법
Javascript + XML - HTML => JSX
JavaScript에서 creatElement와 같이 DOM을 제어하게 되면 코드가 길어져서 유지보수가 힘들어질 수 있다. JSX 문법을 사용하면 좀 더 쉽게 DOM을 제어할 수 있다.
(JSX 문법으로 작성된 코드는 순수한 JS로 컴파일된다. (babel 사용))
- JSX 문법
- 최상위 요소는 하나여야한다.
- 자식들을 바로 렌더링하기 위해선 <> </> 를 사용하여 감싸줘야한다. ⇒ Fragments
- JS 표현식을 사용하려면 중괄호로 감싸주어야 한다.
- style을 이용한 인라인 스타일링
- 중괄호 안엔 if문이 아닌 삼항연산자를 사용해야 한다.
function App() {
// JS 사용 영역
return (
// JSX 사용 영역
// {} 안에 JS를 사용할 수 있다.
<div className="App">
<p>React</p>
</div>
);
}
export default App;<실습>
function App() {
// JS 사용 영역
const onClickButtonHandler = () => {
alert("클릭 완료!");
};
return (
// JSX 사용 영역
<div
className="App"
style={{ // style
height: "100vh",
color: "blue",
}}
>
<p>클릭하세요!</p>
<input type="text" />
<button onClick={onClickButtonHandler}>클릭!</button>
</div>
);
}- style에서 {{}}와 같이 중괄호 두 쌍을 사용하는 이유?
- 한쌍은 jsx 문법에서 js를 사용하기 위해 사용한 { }이고, 한쌍은 style에 적용할 객체의 { }이다.
부모 컴포넌트와 자식 컴포넌트
function Child() { // 자식 컴포넌트
return <div>나는 자식요소입니다.</div>;
}
function App() { // 부모 컴포넌트
return (
<>
<Child />
</>
);
}Props
컴포넌트 간 정보 교류 방법
부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터이다.
- props는 반드시 부모에서 자식 방향으로 흐른다.
- 자식 컴포넌트에서 props는 반드시 읽기 전용으로 취급하며 변경하지 않는다.
Props로 값 전달하기
- 부모 컴포넌트에서 자식 컴포넌트로 props를 전달해준다.
function Child(props) {
console.log("props", props); // props를 받아온다.
return <div> My name is {props.myName}</div>;
}
function App() {
const name = "kim";
// props를 넘겨준다.
return (
<div>
<Child myName={name} />
</div>
);
}props의 구조
props.myName의 형식으로 사용할 수 있다.
- 실행 결과
prop drilling
props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달하는 방법이다.
만약 부모 컴포넌트의 값을 자식 컴포넌트의 자식 컴포넌트에게 전달하려 한다면 계속 해서 데이터를 내려주는 과정이 필요할 것이다. 이러한 과정을 Prop drilling이라고 한다.
function Son(props) {
return (
<div>
나는 {props.gfName}의 손자입니다.
</div>
);
}
// prop drilling
// 데이터 전달만을 위한 컴포넌트가 생긴다.
function Mother(props) {
const gfName = props.grandFatherName;
const name = "흥부인";
return <Son gfName={gfName} />;
}
function GrandFather() {
const name = "산타할아버지";
return <Mother grandFatherName={name} />;
}
function App() {
return <GrandFather />;
}많은 prop drilling이 발생하면 받아온 props가 어디에서 왔는지 알아보기 힘들고 데이터 전달만을 위한 컴포넌트가 많이 생기기 때문에 유지보수 측면에서 좋지 않다.
Props Children
- 레이아웃 컴포넌트를 만들 때 자주 사용하는 방법
- 레이아웃 컴포넌트가 쓰이는 모든 곳에서
<Layout></Layout>안에 있는 정보를props.children으로 가져와 사용할 수 있다.
function App() {
return <User>안녕하세요!</User>;
}
function User(props) {
return <div>{props.children}</div>; // 상위 컴포넌트의 props.children 값을 가져온다.
}구조분해할당을 통한 props 내부값 추출
- props의 값을 받을 때 { } 안에 받아올 값을 지정해주면 구조 분해 할당을 통해 추출된 props의 내부값을 가져올 수 있다.
// App.js
import Child from "Child.js"; // import
function App() {
const name = "test";
return (
<Child name={name}>
이름
</Child>
);
}
export default App; // export// Child.js
import React from "react";
function Child({ name, children }) { // 구조분해할당
return <div>{name, children}</div>;
}
export default Child;defaultProps 설정
- 지정된 props 값이 들어오지 않으면 defaultProps가 사용되도록 한다.
function Child({ name, children }) { // 구조분해할당
console.log(age, name, children);
return <div>{age, name, children}</div>;
}
Child.defailtProps = {
age: "20",
};요약 및 회고
오늘은 React Component와 React Props에 대해 배웠다.
React에서 Component란 재사용 가능한 독립적 모듈이며 개별적인 컴포넌트를 구성하여 UI를 보다 쉽게 구현할 수 있다.
리액트에서 사용하는 JSX 문법은 Javascript를 확장한 문법으로 JS와 HTML을 합친 것과 비슷하기 때문에 좀 더 간단하게 DOM을 제어할 수 있다는 장점이 있다.
Props란 상위 컴포넌트에서 하위 컴포넌트 방향으로만 값을 넘겨주는 방법이다. props를 그대로 넘겨주는 방법과 구조분해할당을 통해 props안의 값을 지정하여 넘겨주는 방법, 레이아웃 안에 포함된 정보를 가져오는 children 방법이 있다. props가 들어오지 않을 경우를 대비하여 defaultProps를 지정하는 방법도 있다.
