리액트의 주의사항과 Component 문법

주의사항 

App.js의 return ( ) 괄호 안에 하나의 <div></div>만 들어갈 수 있다.

즉 return( ) 안에 있는 것은 하나의 태그로 묶여야 한다.

여러개의 div가 들어가면 안된다. ex) <div></div><div></div>

여러개의 div를 그래도 쓰고싶거나 의미없는 div를 사용하기 싫으면

<></>으로 감싸면 된다.

 

 

 

리액트 Component 문법

html을 나만의 한 단어 바꿔서 그 단어로 줄여서 쓸 수 있는 방법이다.

컴포넌트 안에 컴포넌트를 넣어서 만들 수 도 있다.

 

어떤것을 component로 만드는 것이 좋을까?

-> 반복되는 html 덩어리들, 자주 변경되는 html UI들, 다른 페이지들

 

component의 단점

state 쓸 때 복잡해진다.

 

 

component 만드는 법

1. import 코드와 export default App; 코드 사이에 새 component를 만든다.

+ App()도 하나의 component이다.

function FooterTab() {
  return (
    <div className="modal">
      <h1>제목</h1>
    </div>
  );
}

or

import React, {Component} from 'react'; // Component를 import 한다.

class FooterTab extends Component{
    render(){
        return (
            <div className="modal">
                <h1>{this.props.title}</h1>
                <div>{this.props.description}</div>
            </div>
        );
    }
}

FooterTab은 component명이고 return( )안에 들어있는 내용이 component의 내용이다.

 

 

2. App()함수 안의 원하는 위치에다가 component를 사용한다.

<FooterTab/>
or
<FooterTab></FooterTab>

 

 

component 만들 때 주의사항

컴포넌트의 이름 첫글자는 꼭 대문자로 해야한다. ex ) function FooterTab()

(대문자로 안하면 렌더링 되지 않음) 

 

 

 

 

 

출처 : https://www.youtube.com/playlist?list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy 변형 및 요약