1. 컴포넌트
✨ 컴포넌트의 개념과 종류는 무엇일까
1-1. React Components?
컴포넌트 개념
컴퓨넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고,
각 조각을 개별적으로 살펴볼 수 있습니다.
개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.
props 라고 하는 임의의 입력을 받고,
화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
리액트 컴포넌트를 표현하는 두가지 방법
- 함수형 컴포넌트
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 아래와 같음
function App () {
return <div>hello</div>
}- 클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}두 가지 모두 기능상으로 동일하다.
그러나 공식 홈페이지에서는 함수형 컴포넌트 사용을 권장한다.
결론적으로 리액트에서 말하는 컴포넌트는 함수 입니다.
누군가 컴포넌트를 제작해주세요 라고 말한다면
html 처럼 생긴 jsx를 return하는 함수를 만드는 것입니다.
- 컴포넌트 보는 방법
컴포넌트 코드를 볼 때는 영역을 나누어서 보면 편합니다.
컴포넌트 밖에서 내가 필요한 파일을 import,
또는 export default 의 기능을 통해 컴포넌트를 밖으로 내보내는 코드가 있습니다.
컴포넌트 안에선 JavaScript를 쓸 수 있는 부분이 존재합니다.
그 안에서 JavaScript를 작성합니다.
그리고 return을 기준으로 아랫부분에는 HTML (정확히는 JSX)
를 작성하고 여기에 작성한 html 코드와 값들이 화면에 보여지는 것입니다.
주의사항으로는 컴포넌트를 만들 때 첫 글자는 대문자여야 하고,
폴더는 소문자로 시작하는 카멜케이스,
컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 지어야 합니다.
2. 부모자식 컴포넌트
✨ 리액트에 존재하는 모든 UI 요소들은 컴포넌트라고 합니다.
✨ 각 컴포넌트는 위치하는 곳에 따라 부모 - 자식 컴포넌트 관계를 가집니다.
2-1. 컴포넌트 안에 컴포넌트?
컴포넌트는 다른 컴포넌트를 품을 수 있습니다.
이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라 부르고,
다른 컴포넌트 안에 품어지는 컴포넌트를 자식 컴포넌트 라고 부릅니다.
// src/App.js
import React from "react";
function Child() {
return <div>나는 자식입니다.</div>;
}
function App() {
return <Child />;
}
export default App;App.js 파일 안에 Child라는 새로운 컴포넌트가 생성되었고,
Child 컴포넌트를 App 컴포넌트에서 마치 HTML 태그 사용하듯이 들어가 있습니다.
이렇게 코드를 작성하면 화면에는 나는 자식입니다 문장이 보여지게 됩니다.
이 파일에서 내보내진 컴포넌트는 App 컴포넌트 이기때문에
App 컴포넌트가 화면에 보여지는 것입니다.
하지만 App 컴포넌트는 Child 컴포넌트를 자식으로 삼고 있어서
자식 컴포넌트에 있는 나는 자식입니다 라는 문장이 보여지게 되는 것입니다.
이렇게 만들어진 컴포넌트는 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있고,
앞으로 화면에 보여지게 하다를 줄여서 Rendering 이라고 부릅니다.
이렇게 함수로 만들어진 컴포넌트를
html태그 사용하듯이 코드를 작성하는 이 방식이 JSX 라고 부르는 것입니다.
3. JSX
✨ JSX란 무엇일까
3-1. JSX 문법?
// JavaScript를 확장한 문법
// JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법
const element = <h1>Hello, world!</h1>;엘리먼트는 단순히 화면에 그려지는 HTML적 요소라고 인식하면 됩니다.
HTML을 품은 JS를 우리는 JSX 라고 합니다.
평범한 HTML 태그는 .js 파일 안에서 사용할 수 없습니다.
그러나 이를 해결하기 위해 나온게 JSX 입니다.
자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있습니다.
const start_half = <div>
<h1>안녕하세요!</h1>
<p>시작이 반이다!</p>
</div>;그래서 JSX에서 쓰는 태그는 DOM 요소인가?
그건 아니다 정확히는 React 요소이고 이 둘의 차이점은
지금 리액트 돔을 구성하는 건 리액트 요소
돔을 구성하는 건 돔 요소라는 차이로 알고 있으면 되고,
더 자세한건 가상돔을 배우면서 알 수 있다.
그렇다면 브라우저는 JS만 해석 가능한게 아니였나?
정답이다 브라우저는 그래서 브라우저는 jsx 파일을 직접 해석할 수 없습니다.
따라서 babel을 이용해 jsx를 js로 전환해주어야 한다.
// jsx 파일
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// 변환 후 브라우저가 보는 js 파일
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);3-2. JSX 사용
// JSX에서 javascript 값을 가져올 때는 중괄호를 사용합니다.
// 또한 map 삼항연산자 등 자바스크립트 문법을 {} 를 사용해 이용할 수 있다.
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
const number = 1;
return (
<div className="App">
<p>안녕하세요</p>
{/* JSX 내에서 코드 주석도 이렇게 사용한다. */}
{/* 아래는 삼항연산자를 태그안에 사용한 것이다. */}
<p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
</div>
);
}
export default App;