[TIL] 240118 (목) React 기초를 다져보자.

React 강의를 들으며 처음 배우는 기본 개념들에 대해 간단하게 기록해보고자 한다.

1. Component(컴포넌트 = 벽돌)

: 컴포넌트를 통해 UI 재사용이 가능한 개별적인 여러 조각으로 나누고, 그 조각을 개별적으로 살펴 볼 수 있다.

React 에서 말하는 component = 함수를 만드는 것.

✔️ Component는 대문자로 시작한다.
✔️ 부모 - 자식 관계가 존재한다. // 부모 -> 자식(위 -> 아래) 순으로 흐른다.

import React from "react";

// 자식 컴포넌트
function Child() {
  return <div>나는 아들입니다.</div>;
}

// 부모 컴포넌트
function App() {
  return <div>저는 부모입니다.</div>;
}

export default App;

2. JSX 문법

: JavaScript를 확장한 문법으로, React element를 생성한다.
즉, 쉽게 말해 HTML을 품은 JS 문법이라고 생각하자.

function App() {
// 여기 안에 js 문법을 활용하여, 변수 선언, 함수 선언 등 가능하다.

  return (
    <div>
      <div>html과 비슷한 형태를 나타낸다.</div>
      <div>{중괄호를 이용하여 JS 문법을 적을 수 있다.}</div>
    </div>
  );
}

▶️ 최상위 element는 단 하나!

3. Props

: 부모 -> 자식으로 데이터를 전달 할 때, 부모에서 -> 자식에게로 순차적으로 데이터가 전달된다.

import React from "react";

// 자식 컴포넌트
function Child(props) {
  return <div>나는 {props.parentName}의 아들입니다.</div>; // 부모의 데이터를 받는 방법
}

// 부모 컴포넌트
function App() {
  const name = "홍길동";
  return <Child parentName = {name}/>; // 자식에게 데이터 전달하는 방법
}

export default App;

++ 오늘의 정리노트

React에서 자주 사용하는 ES6 문법
JSX (JavaScript + XML) 문법

JS 문법 강의를 들을 때, 한 강의, 한 강의를 들을 때 마다 기록을 하고 정리를 하느라 강의를 수강하는데 너어무 오랜 시간을 잡아먹어버렸다. 이번 React 때는 빠르게 필요한 부분들만 정리해가며 완강을 한 다음, 2회차로 복습하면서 기억이 안 나거나 중요한 부분들을 마저 정리하는 식으로 기록해야겠다.