[React] 1. Component

Sunghoman·2022년 10월 1일

React

목록 보기

2/5

역사적인 첫 번째 리액트 컴포넌트

import React from 'react'; // 사실 이거 이제 import 안해도 됨

function Hello() {
	return <div>Hello World!!!</div>
}

export default Hello;

엥 이건 함수 아닌가여?

넹 맞아여 근데 리액트는 이런걸 뚝딱뚝딱 이어 붙여서
웹페이지 만듭니다.

레고 블럭이라고 생각하세여

jsx문법인데, 자바스크립트 문법으로 html 짤 수 있게 하는거에여

이거 벨로그인데, 이것도 리액트로 만들었음

일반적인 html로 만들면

<body>
  <header>
    <div>벨로그 로고</div>
    <button>다크모드, 라이트모드</button>
    <button>검색 버튼</button>
    <button>새 글 작성</button>
    <img src="내 프로필 사진" />
  </header>
  <div>
    내 프로필 정보
  </div>
  <ul>
    <h4>태그 목록</h4>
    <li>전체 보기</li>
    <li>시리즈1</li>
    <li>시리즈2</li>
    <li>시리즈3</li>
    <li>시리즈4</li>
  </ul>
</body>

뭐 대충 이렇게 짤 듯

우린 리액트로 짤거니까,
일단, 우리가 모니터에서 눈으로 보이는 대로 일단 화면을 그려보자구여

어때여 좀 비슷한가여? 제가 파워뽀인트로 만들었어요 ㅎㅎ

우리가 보는 웹사이트를 이렇게 덩어리 덩어리로 나눌 수 있져?

리액트는 이거대로 각각 hmtl 짠다음 하나로 합쳐서,

하나의 html 파일로 반환해줍니다.

근데 덩어리라고 부르면 쨰네가 좀 기분나쁠거잖아여

컴포넌트라고 불러줍시다

컴포넌트 별거 없네여

넹 별거 없읍니다.

이제, 저 컴포넌트(덩어리)들을 하나씩 만들러 가보자구여

import React from 'react'; // 사실 이거 이제 import 안해도 됨

function Header() {
	return (
        <header>
          <div>벨로그 로고</div>
          <button>다크모드, 라이트모드</button>
          <button>검색 버튼</button>
          <button>새 글 작성</button>
          <img src="내 프로필 사진" />
        </header>
    )
}

export default Header;