23.06.12) React를 알아보자

💡 React.js 란?

• 규모가 큰 자바스크립트 라이브러리로 사용자 인터페이스(UI)를 쉽게 구성하도록 도와줌
• SPA 기반의 프론트엔드 개발 프레임워크 중 하나로 AngularJS, VueJS보다 월등히 인기가 많음.
  • SPA (Single Page Application) : 한 개의 페이지로 이루어진 애플리케이션
  • 2023 Best Javascript https://kinsta.com/blog/javascript-libraries/#the-most-popular-javascript-libraries

• Facebook에서 소프트웨어 엔지니어로 일하는 Jordan Walke가 2013년에 만들었음
  • 막강한 커뮤니티와 자료를 보유하고 있음

 

💻 개발환경 필수조건

1. node.js 설치 (노드 플랫폼에 의해 실행됨)
2. 패키지 매니저 yarn 설치 (프론트엔드 의존성을 관리)
   • 터미널에서 yarn 설치 

npm install -g yarn

 

📌React Component

• 리액트로 작성된 화면은 컴포넌트로 구성되어 있으며 JavaScript 함수와 유사함
• 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 조각별로 유지보수 가능함
• jsx파일에서 rfce로 자동완성 가능 (함수형 컴포넌트 사용)

//예시
import React from "react";

function App() {
  return <div>App</div>;
}

export default App;

• 부모-자식 컴포넌트 연결하기

import React from "react";

function App() {
  return <Child />;
}

function Child() {
  return <div>나는 자식입니다.</div>;
}

export default App;

 

📌Props (컴포넌트 간의 정보 교류)

: 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터 ( [부모] → [자식] 방향으로만 흐르는 단방향 )

  [컴포넌트 간의 정보를 교류할 때 props를 사용]

• 전달하기 : 주체 (부모)

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Father />;
}

function Father() {
  const name = "유재석";
  return <Child fatherName={name} />; // 💡"props로 name을 전달"
}

function Child(props) {
  return <div>나는 {props.fatherName}의 자식이에요</div>;
}

export default App;


//나는 유재석의 아들이에요

👉 props는 object literal 형태이기 때문에 {props.fatherName} 로 꺼내서 사용할 수 있다.

     (object literal의 key가 fatherName 인 이유: Child로 보내줄 때 fatherName={name} 으로 보내주었기 때문)

 

        ❓object literal 란 {key: “value”} 데이터 형태를 의미함