TIL #27. 리액트-컴포넌트/props

ceres·2020년 2월 23일
0

TIL

목록 보기
8/34

(20/2/23) 생활코딩 강의

JSX

JavaScript를 HTML 처럼 사용할 수 있게 해주는 React 문법.

Component

출력하고 싶은 UI 부분을 나눠서 보여주는 기능
개발자가 원하는대로 컴포넌트를 나눌 수 있다.
한페이지 전체도 하나의 컴포넌트가 될 수 있다.

Component type

컴포넌트 타입에는 함수형(fuction type)과 클래스형(class type) 이 있다.

컴포넌트를 만들어 보자

pure.html 파일의 <header> 태그를 App.js 파일에 Subject라는 이름으로 컴포넌트를 만들어보자.

  1. 먼저 App.js에 Subject 컴포넌트를 만들어준다. 이때 컴포넌트 이름 첫문자는 대문자여야 한다.
  2. pure.html 파일의 header 태그를 App.js 파일의 Subject 컴포넌트의 return 함수 괄호 안에 넣어준다.
  3. App.js 파일의 App 컴포넌트에 <Subject> 태그를 넣어준다.

개발자 도구를 보면 App 컴포넌트 안에 Subject 컴포넌트가 있는 것이 아니라 header 태그가 있는 것을 볼 수 있다.
Subject 라는 컴포넌트 이름만 적어줬는데 html에서 인식이 가능한 것을 볼 수 있다.

<결과>

pure.html의 nav태그와 article태그도 App 컴포넌트에 넣는다고 생각해보자.
pure.html 과 App 컴포넌트를 비교해 보면
APP 컴포넌트의 경우 내부에 있는 컴포넌트 이름에만 집중하면 됨으로 복잡도를 낮출 수 있다.

<컴포넌트 만들 때 주의사항>

컴포넌트 이름 첫 글자는 대문자로 적어야한다.
컴포넌트 내에는 꼭 하나의 최상위 태그가 있어야한다.

props

props: 속성을 나타내는 데이터이다. html 태그에서 attribute랑 같은 의미이다.
props를 받아서 그것을 바탕으로 서로 다른 결과를 만들어내는 똑똑한 컴포넌트를 만들 수 있다.

파일로 컴포넌트 분리하기

1) src 폴더에 components 폴더를 만든다.
2) components 폴더 안에 Nav.js 파일을 만든다.
3) App.js 파일에 있는 Nav 컴포넌트를 Nav.js로 옮겨주자
(옮긴 후 App.js의 Nav 컴포넌트는 삭제한다.)
4) App.js 에 추가할 것

import Nav from "./components/Nav"; 
//components 폴더에 있는 Nav.js 파일에서 Nav 컴퍼넌트를 가져오겠다는 의미이다.

5) Nav.js 에 추가할 것

  • 첫줄
import React, { Component } from 'react';
//컴포넌트를 Nav.js에서 사용하기 위해서 사용하는 코드이다.
//from 'react' : react 라는 library 에서 
//{Component} : component 라는 class 를 로딩하고 있는 것. 이것을 밑의 component가 사용한다.
//import React : react 사용할 때는 필수적으로 사용해야 한다.
  • 마지막줄
export default Nav;
//Nav.js에 많은 함수나 변수가 있을 수 있다. 그 중에 어떤 것을 외부에서 사용할 수 있게 허용할 것인가를 코드로 작성한 것이다.
//여기선 Nav 컴퍼넌트를 외부에서 사용할 수 있게 허용한다는 의미이다.

나머지 컴포넌트 들도 이런 방법으로 파일을 분리시켜주면 된다.

파일로 분리 후

App.js 가 깔끔해 진 것을 볼 수 있다.

컴포넌트 또한 파일로 관리 되기 때문에 손쉽게 볼 수있다.

0개의 댓글