[React] Components

리액트는 컴포넌트들을 다시 쓸 수 있다는 장점이 있다. 

큰 파일을 작게 나누고

함수별로 나눠놓은 컴포넌트를 다시 쓸 수 있다.

한 파일에 코드가 많이 들어가면 그 만큼 내용을 이해하기가 어려워진다. 

최대한 잘게 쪼개서 나누는 것이 좋다. 

 

전체 웹사이트를 작은 컴포넌트로 나눠보자. 

 

컴포넌트 만들 때 주의할 점 

컴포넌트 만들 때 함수 이름은 파스칼 케이스로 한다.

즉 첫글자를 대문자로 써준다.

 

h1 컴포넌트 만들기 

<h1>내용을 함수 안으로 옮긴다.

<h1> 자리에는 heading 함수를 태그 형태로 써준다.

 

 

<heading></heading>을

chidren이 없으니 셀프 클로징 태그로 바꿔준다. 

기계는 <heading></heading>이나 <heading />을

똑같이 인식하나 다른 개발자들이 보기 편하게 <heading />으로 써준다.

혹시 까먹고 안바꾸면 linter가 자동으로 바꿔주긴 한다.

 

Heading.jsx 파일을 만들고 

Heading 함수를 집어 넣는다. 

 

 

 

함수만 옮겨놓으면 파일이 코드를 읽지 못한다.

자바스크립트 안에 html 문법이 들어가 있는데 app.js에서는 react를 불러와서 

html 문법을 자바스크립트 문법으로 변환을 시켜서 해석하는 것이다. 

document.createElement(h1) ?? 이런 식으로..

이 html 문법을 그대로 쓰고 싶다면 react를 불러와서 jsx 문법으로 바꿔줘야 한다. 

 

 

 

 

그럼 어떻게 app.js의 <heading />이 이 파일의 Heading이라고 알려줄까?

파일에서 export를 적어준다. 

이 Heading이 디폴트 export 라고 알려준다. 

heading()에 괄호를 붙이지 않는다. 붙이면 바로 실행이 된다. 

 

 

 

index.js에서 Heading 파일을 import 한다

relative path를 사용해서 ./Heading.jsx

익스텐션은 안써줘도 된다 ./Heading 

 

 

 

---

 

리스트 목록을 컴포넌트로 만들어 보기 

 

List.jsx 파일을 만든다

 

 

List.jsx 파일에 내용을 옮긴다

 

 

List 파일 불러오고 List있는 자리는 List 태그로 대신한다. 

children이 없으니 self-closing tag로 적어준다

 

 

내용이 그대로 나온다

 

 

 

이 Heading과 List를 다시 App 함수로 묶는다

App.jsx로 묶고 나서 Heading과 List를 넣는다

App.ejs

 

 

 

<App /> 사용 

보통 index.js 파일 안에는

<div>,  <h1> 태그 등 구체적인 태그를 쓰지 않는다. 

모든 내용을 <App />으로 교체한다

index.js

 

 

이 형태가 기본형태이다

JS 파일에는 <App /> 만 빼고는 custom code가 없게 만든다. 

 

만약 리스트가 하나 더 필요하면 

App.ejs에서 <List />만 하나 더 써주면 바로 추가가 된다. 

 

 

 

 

나중에는 components가 엄청 많아지게 된다. 

폴더로 관리해야한다.  

파일 만들기 

 

 

경로 다시 지정하기 

 

 

 

---

시간에 따라 인사말과 색 바꾸기를 컴포넌트화 하기 

 

index.js

 

 

App.jsx

 

 

Heading.jsx

import React from "react";

function Heading() {

const date = new Date();

const currentTime = date.getHours();

let greeting;

const customStyle = {

color: ""

};

if (currentTime < 12) {

greeting = "Good morning !";

customStyle.color = "red";

} else if (currentTime < 18) {

greeting = "Good afternoon !";

customStyle.color = "red";

} else {

greeting = "Good evening !";

customStyle.color = "red";

}

return (

<h1 className="heading" style={customStyle}>

{greeting}

</h1>

);

}

export default Heading;