참고
React란 무엇인가?
NOTE
React ⇒ UI를 만들기 위한 JavaScript 라이브러리이다!
React의 핵심개념
•
컴포넌트 기반 접근: 독립적이고 재사용 가능한 여러 조각의 컴포넌트로 구성
•
선언적 뷰: 데이터가 변경되면 컴포넌트를 효율적으로 업데이트 한다.
•
가상 DOM: 메모리에 있는 가벼운 DOM사본으로, 실제 DOM보다 빠르다.
•
JSX: JavaSciprt 코드 내에서 HTML을 사용해 UI를 표현할 수 있따.
리액트 프로젝트 생성방법
// 프로젝트 생성
npx create-react-app my-app // my-app은 프로젝트 이름
npx create-react-app my-app --template typescript // typescript 생성
npm install // node-module 생성
npm start // 프로젝트 실행
JavaScript
복사
1. create-react-app
react.new // (브라우저에 입력하면 codsandbox 생성됨)
JavaScript
복사
2. 브라우저
•
npm install, npm dev와 같은 명령을 실행할 필요없이 실시간으로 편집이 가능하다.
npm create vite@latest [프로젝트 이름] -- --template react-ts // 프로젝트 생성
npm install
npm dev
JavaScript
복사
3. vite를 통한 프로젝트 생성
•
기존 리액트 생성방식보다 코드를 효율적으로 변환시켜준다.
컴포넌트(JSX, props. state)
NOTE
컴포넌트는 JSX, props, state를 가지고 있으며 이를 통해 React Element를 output하는 함수이다!
컴포넌트 구성요소 와 변환과정
동일한 컴포넌트를 props값을 받아 다르게 출력한다.
function CoreConcepts({ title, description, image }) { // 컴포넌트
return (
<li>
<img src={image} alt="{props.title}" />
<h3>{title}</h3>
<p>{description}</p>
</li>
);
}
// -------------------------------------------------------
// 인자값 직접 제공
<CoreConcepts
title="Components"
description="The core Ui building block"
image={componentsImge}
/>
// ...으로 한번에 제공
<CoreConcepts {...CORE_CONCEPTS[1]} />
JavaScript
복사
예시 코드
컴포넌트의 특징
•
여러 Element를 그룹화하고 재사용 가능한 코드 블록을 형성한다.
•
재사용이 가능하며, props를 통해 React Element를 반환한다.
•
항상 대문자로 시작해야한다. (소문자는 DOM으로 처리된다)
•
props, state, JSX를 통해 만들어진다.
•
ex) function Component(props) { return <div> Hello World </div>;}
React Element
•
JSX가 Babel과 같은 트랜스파일에 의해 생성된다.
•
한 번 생성되면 그 자체로 변경할 수 없다.
•
가상 DOM에 무엇이 그려져야 하는지 알려준다.
•
ex) <div> Hello World </div> 와 같은 JSX코드가 React Element로 변환된다.
함수 컴포넌트와 클래스 컴포넌트
NOTE
컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다!
함수형 컴포넌트를 자주쓴다.
function Welcome(props) { // props를 통해 속성값 받음
return <h1>Hello, {props.name}</h1>;
}
JavaScript
복사
함수 컴포넌트
•
이 함수는 데이터를 가진 하나의 props(속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트다.
•
이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라 한다.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
JavaScript
복사
클래스 컴포넌트
•
ES6의 클래스를 사용해서 “클래스 컴포넌트”를 정의할 수 있다
•
함수형 컴포넌트와 기능적으로 차이는 없음
JSX(표현식, 프래그먼트)
NOTE
JSX는 JavaScript를 XML을 의미하며, HTM 코드를 JavaScript로 받는 문법!
function Header() {
const reactDescriptions = ["Fundamental", "Crucial", "Core"]; // 변수
function genRandomInt(max) { // 함수
return Math.floor(Math.random() * (max + 1));
}
return ( // 변수 + 함수 사용
<header>
<img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
<h1>React Essentials</h1>
<p>
{reactDescriptions[genRandomInt(2)]} React concepts you will need for
almost any app you are going to build!
</p>
</header>
);
}
JavaScript
복사
컴포넌트의 JSX예시
// JSX 코드
function App() {
return (
<h1>Hello, GodDaeHee!</h1>
);
}
// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
return React.createElement("h1", null, "Hello, GodDaeHee!");
}
JavaScript
복사
JSX를 사용하면 바벨이 자동으로 해석해준다.
•
JSX는 React Element를 생성하며, React Element는 브라우저 DOM Elment와 달리 일반 객체이다.
•
React에서 JSX의 사용이 필수는 아니지만, JSX를 사용하면 JS코드안에서 UI 관련 작업을 할 수 있기 때문에 시각적으로 도움이 된다.
프래그먼트
function Post() { // 풀네임 작성방법
return (
<React.Fragment>
<PostTitle />
<PostBody />
</React.Fragment>
);
}
function Post() { // <Fragement></Fragment>의 약어가 <></>
return (
<>
<PostTitle />
<PostBody />
</>
);
}
JavaScript
복사
•
JSX는 하나의 React Elment만 반환이 가능하며, 여러 컴포넌트를 반환하기 위해서는 감싸주는 코드가 필요하다!
props(properties)
NOTE
props는 컴포넌트에 전달되는 데이터로 부모 → 자식 컴포넌트로 데이터를 전달하는 수단이다!
props를 자세히보면 부모 → 자식으로 감을 알 수 있다.
// 컴포넌트 작성(children은 내부 컴포넌트를 부르는 약속된 이름)
export default function TabButton({children, onSelect, ...props}){ // ...props는 앞에 2개이외의 인자를 처리한다.
return (
<li>
<button onClick={onSelect}>{children}</button>
</li>
)
}
function handleClick(selectedButton) {console.log(selectedButton)}
// 사용
<TabButton onSelect={() => handleClick('Compnennts')}>Compnennts</TabButton>
JavaScript
복사
props 사용예시 (하향식, 부모 → 자식)
function ChildComponent(props) {
return <button onClick={props.onChildClick}>자식 버튼</button>;
}
function ParentComponent() {
function handleChildClick() {
alert('자식 컴포넌트에서 이벤트가 발생했습니다!');
}
return (
<div>
<h1>부모 컴포넌트</h1>
<ChildComponent onChildClick={handleChildClick} />
</div>
);
}
JavaScript
복사
props 사용예시(상향식, 자식 → 부모) , 함수를 통해 가능
function Avatar({ person, size }) { // 구조분해 방식
// ...
}
function Avatar(props) { // PROPS 방식
let person = props.person;
let size = props.size;
// ...
}
JavaScript
복사
2개의 방식은 동일한 결과를 가진다.