02. 컴포넌트

# What? 그래서 이게 뭔데?

- 데이터를 input으로 받고, 데이터들을 이용하여 UI를 어떻게 보일지 정의한 Element를 output으로 내뱉는 함수
(그냥 하나의 부품이라 생각하면 됨)

 

# Why? 이걸 왜 쓰는데?

- 컴포넌트 기반으로 요소들을 부품화하여 조립하는 식으로 코딩을 하면 유지보수에 용이

 

# How? 어떻게 쓰는데?

1. 컴포넌트 생성해보기

import React from "react";

// 최신문법버전
const [컴포넌트명] = () => {
	return (
		<div>
		
		</div>
	);
};

export default [컴포넌트명];

// 기존문법버전
function [컴포넌트명](){
	return (
		<div>
		
		</div>
	);
};

export default [컴포넌트명];

- 예전에는 용도에 따라 함수형 컴포넌트로 만들지, 클래스형 컴포넌트로 만들어야할지 고민해야했음(몰라도됨, 궁금하다면 읽어보기)

함수형 컴포넌트	클래스형 컴포넌트
state 제어 X	state 제어 O

- 그런데 hooks라는 것이 업데이트 된 이후 함수형 컴포넌트에서 state를 다룰 수 있게 됨. 그래서 이젠 고민 없이 함수형 컴포넌트만 사용하면 됨. hooks나 state에 대해선 뒤에서 다룰 예정.

 

* jsx란?

React 엘레먼트를 생성(html이랑 비슷하게 생김, UI 작업을 편하게 할라고 만든거)

 

# Practice 연습

1. <Parent/> 컴포넌트를 만들어 화면에 "Parent"라는 텍스트 띄워보기

@ App.js

import React from 'react';
import Parent from './Parent';

function App() {
	return (
		<div className="App">
			<Parent/>
		</div>
	);
}

export default App;

@ Parent,jsx

import React from 'react';

const Parent = () => {
   return (
       <div className="parent">
           Parent
       </div>
   );
}

export default Parent;

 

2. "Child"라는 텍스트를 띄우는 <Child/> 컴포넌트를 만들어 <Parent/> 컴포넌트에서 호출해보기

@ Parent.jsx

import React from 'react';
import Child from './Child';

const Parent = ({}) => {
   return (
       <div className="parent">
           Parent
           <Child/>
       </div>
   );
}
export default Parent;   

 

@ Child.jsx

import React from 'react';

const Child = ({ }) => {
   return (
       <div className="child">
           Child
       </div>
   );
}
export default Child;

 

3. <Child/> 컴포넌트 3개를 포함하는 <Children/> 컴포넌트를 만들어 <Parent/>에서 호출해보기

@ Parent.jsx

import React from 'react';
import Children from './Children';

const Parent = ({}) => {
   return (
       <div className="parent">
           Parent
           <Children/>
       </div>
   );
}
export default Parent;   

@ Children.jsx

import React from 'react';
import Child from './Child';

const Children = ({ }) => {
   return (
       <div className="children">
           <Child/>
           <Child/>
           <Child/>
       </div>
   );
}
export default Children;

 

# Problem 과제

할일 목록 만들어보기

# Bonus 꿀팁

1. 컴포넌트틀 자동생성 단축키 만들기

@ cfc.code-snippets

{
	"Create Functional Component": {
		"prefix": "cfc",
		"body": [
            "import React from 'react';\n",
            "const ${1:Component} = ({ }) => {",
            "   return (",
            "       <div>\n",
            "       </div>"
            "   );",
            "}",
            "export default ${1:Component};"
        ],
		"description": "create functional component"
	}
}

-> 이제부터 자바스크립트 파일 내에서 cfc 를 입력한 후 탭키를 누르면 컴포넌트 템플릿이 생성됨.

 

2. 태그 단축키 자동생성, 리액트 코드 단축키 자동생성 플러그인 추가

-> 이제 여는 태그만 쳐도 닫는 태그까지 자동생성

 

 

* 코드 참고 : https://github.com/ShinHyungJune/react-course/tree/course-2-components