[week 1] - UI 표현하기 (컴포넌트, JSX, props)

안녕하세요 ! 웸파트 YB 김가현입니다

스터디 노션 세부 커리큘럼에 있는 1주차 파트 UI표현하기 - 첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기 부분에 해당하는 공식 문서를 읽고, 정리해보았습니다 👀

⭐️ 컴포넌트

컴포넌트란 무엇일까?

• 재사용 가능한 UI 요소
• 리액트는 컴포넌트 기반의 구조라는 특징을 가지며, 모든 페이지는 컴포넌트들의 조합으로 구성되어 있다 !

컴포넌트를 정의하고 사용하는 방법

• 컴포넌트를 정의하는 방법에는 클래스형, 함수형이 있으나 함수형을 권장하고 있다.
  • 가독성이 좋고 코드가 직관적
  • 메모리 자원 측면에서도 효율적
  • Hooks를 통한 state 및 LifeCycle 관리가 가능함 
• 함수명은 대문자로 시작한다.
• return 문 내에는 JSX(JavaScript XML)를 작성한다.
• class는 자바스크립트 예약어이기 때문에 리액트에서는 className을 사용한다.
• style은 객체로 전달해야 한다.
  • camleCase로 작성한다.
  • -는 사용하지 않는다. (background-color -> backgroundColor)
• export default는 한 파일당 한 번만 사용할 수 있다.
• 컴포넌트를 사용하고자 하는 페이지에서 import 하여 사용한다.

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

 

 

⭐️ JSX(Javascript Syntax eXtension)

• JavaScript를 확장한 문법으로, JavaScript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해준다.
• HTML 코드와 비슷하기 때문에 일반 자바스크립트만 사용한 코드보다 더 익숙하고 간결하며 가독성이 좋다.
• 브라우저는 JSX를 이해하지 못하기 때문에 JSX 코드를 JavaScript 코드로 변환해야 한다.

✏️ JSX를 JS로 변환하는 과정

• JSX를 JavaScript(JS)로 변환하는 과정은 바벨(Babel)과 같은 도구를 사용하여 수행된다.
• 이 과정은 브라우저가 실행되기 전, 즉 코드가 번들링되는 과정에서 일어난다.

// JSX
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// JS로 변환된 JSX
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

 

( 위 코드에서 알 수 있듯 JSX를 사용하지 않고 React.createElement() 함수를 이용해 컴포넌트를 렌더링 할 수 있으나, 흔히 쓰는 방식은 아니다 )

 

✏️  JSX 문법 규칙

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

 

Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

function App() {
	return (
		<>
			<div>나리스 화이팅 ~~</div>
		</>
	);
}

 

2. 자바스크립트 표현식을 사용할 수 있다.

 

자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.

유효한 모든 JS 표현식을 사용할 수 있다 -> JS 표현식과 연산자 보러가기

 

3. 모든 태그는 반드시 닫혀야 한다. 

const img = <img src="image.jpg" alt="Description" />;

// error !!!!!
const img = <img src="image.jpg" alt="Description">;

 

 

⭐️ props

• 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.
• 상위 컴포넌트에서 하위 컴포넌트로만 데이터를 줄 수 있다 (단방향 데이터 흐름)
  • 하위 컴포넌트는 읽기만 가능하다. (수정 불가능)
• prop에 기본값을 주길 원한다면, 변수 바로 뒤에 = 과 함께 기본값을 설정해줄 수 있다.

import React from "react";

function Content({ color="blue", name }){
    return <div style ={{color}}>안녕하세요, 저는 {name} 입니다.</div>;
}

export default Content;

import React from "react";
import Content from "./components/content";

function App() {
 
  return (
    <>
      <Content name="김가현" color="green" />
      <Content name="김가현" />
    </>
  )
}

export default App;

 

 

⭐️ props.children

• 상위 -> 하위 컴포넌트로 데이터를 전달하는 또다른 방법 
• 컴포넌트가 다른 컴포넌트를 포함할 때, 그 안에 들어가는 내용을 모두 children으로 접근할 수 있다.
• 자식 엘리먼트나 컴포넌트가 미리 몇 개가 들어올지 알 수 없거나, 다양한 상황에서 재사용 가능하게 만들 때 유용하다 !

import React from "react";

function App() {
  // '안녕하세요' 가 props.children으로 전달된다.
  return <User>안녕하세요</User>; 
}

function User(props) {
  return <div>{props.children}</div>;
}

export default App;

 

😎 궁금한 점

컴포넌트들끼리 props를 넘겨주다 보면 프로젝트의 볼륨이 클 경우에 props로 넘겨주는 값들이 매우 많아질 수 있고, 이런 부분들이 웹 성능에 좋지 않을 것 같은데 왜 ! 어떤 부분에서 ! 좋지 않은지 자세히 알고 싶습니다 🤨