IT/React

5. React - function component(함수 컴포넌트), react 기초 실습

추억 카페 2020. 6. 21. 22:03

React에는 두 종류의 컴포넌트가 존재합니다.

함수 컴포넌트(function component)와 클래스 컴포넌트(class component) 입니다.

두 컴포넌트의 차이점은 클래스 컴포넌트는 React.Component라는 부모 클래스를 상속받기 때문에 함수 컴포넌트에 비해 더 많은 기능을 갖는다는 점입니다. (두 컴포넌트가 무엇인지는 이따가 밑에서 설명드릴게요~실습하면서)

그러나 기능이 많다고 무조건 클래스 컴포넌트를 사용하지는 말아야 합니다.

그 이유는 클래스 컴포넌트가 기능이 많은 만큼 메모리와 리소스를 많이 사용해야 한다는 뜻이기 때문입니다.

React관련 글 초반에 작성하기로 했던 부분을 지금부터 조금씩 진행하려고 합니다.

처음에 계획했던 것에서 좀 바뀌는 부분이 있을 수 도 있습니다. 기존에는 css로 했는데 가능하면 scss로 진행해볼까 합니다.(가능하면요..)

진행하면서 나오는 필요한 개념들을 그때그때 작성하면서 진행할 예정입니다.

이번에는 함수 컴포넌트를 하고 class component가 필요할 때 그때 설명하는 식으로요!

 

그럼 지금부터 조금씩 만들어 볼게요. (저는 Webstorm 30 일판을 사용합니다.)

그리고 자바스크립트 함수 사용에 대해서 모르시는 분들은 https://diarycafe0729.tistory.com/48에서 간단한 형식이라도 보고 오시길 바랍니다.

1. 우선 진행하시는 폴더에 bnb.css와 bnb.js를 만들어주세요.

2. index.html을 수정해주세요. (app.js가 아니라 bnb.js를 사용하기 위해)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./bnb.css" />
</head>

<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="./bnb.js"></script>
</body>
</html>

 

3. component란?

component는 UI를 독립적이고 재사용이 가능하도록 분리시켜 줄 수 있는 조각이라고 볼 수 있다.

한 component는 다른 컴포넌트를 참조해서 출력을 해줄 수 있다.

버튼, 폼, 다이얼로그, 화면 등 컴포넌트로 표현 된다.

 

4. function component?

function component는 props를 주입해서 JSX를 리턴하는 기능을 수행한다.

function component를 작성하고 사용하는 데는 2가지 규칙이 있다.

1) function component를 생성할 때 첫 글자는 대문자로 명시되어야 한다.

ex) const Title = () => {}

* 소문자는 html element로 인식할 수 있기 때문

2) render()에 component를 배치할 때는 닫는 태그가 반드시 있어야 한다.

ex) ReactDOM.render(<Title></Title> ( or <Title />), document.getElementById('root'));

 

5. React님이 호스팅 하는 아파트의 개인실을 function component로 작성하기

bnb.js

const Header = () => {
 return (
   <h1>React님이 호스팅하는 아파트의 개인실</h1>
 )
}

ReactDOM.render(<Header/>, document.getElementById('root'))

* 위에 걸어둔 함수 관련 글에서 애로우 펑션에서 한 줄 코드는 {}와 return이 없어도 된다는 것 기억하시나요?

const Header = () => ( <h1>React님이 호스팅하는 아파트의 개인실</h1> )

ReactDOM.render(<Header/>, document.getElementById('root'))

결과 화면 :

 

앞에 펑션을 공부하신 분들은 아마 이게 애로우 펑션이랑 뭐가 다른거지? 라고 생각하실 수 있을 거에요. ( 에로우 펑션이 아닌 함수 선언식이나 표현식으로 해도 상관없음)

createElement 글에서 props라는 파라미터에 대해서 말씀드린 적이 있습니다.

function component는 props 객체 인자를 받은 후 React element를 반환하므로 유효한 React 컴포넌트입니다.

이러한 컴포넌트는 JavaScript 함수 이기 때문에 함수 컴포넌트라고 불립니다.

다음 글에서는 props를 넘겨받아 출력하는 것까지 해보겠습니다.

이해가 안되는 부분이나 잘못된 부분이 있으면 댓글 달아주세요~

저작자표시