(해당 포스팅은 '2019-06-19' 최종 수정되었습니다.)

안녕하세요, 히니입니다 :)

 

오늘은 React의 핵심인 컴포넌트 생성에 대해 알아보겠습니다.

실습으로 진행되며 코드는 모두 올라와있습니다.

빠른 진행을 위해 코드가 담긴 git 링크도 공유합니다.

다운 받아서 바로 실습하시면 됩니다.

https://github.com/gmldms784/react_study/tree/master/project

 

gmldms784/react_study

all about react. Contribute to gmldms784/react_study development by creating an account on GitHub.

github.com

 


실습 1

 

1. 파일 생성 후 create-react-app 하기

 

2. yarn start

 

3. 화면 확인

 

4. index.html 수정

 

title 변경

 <title>Practice_react</title>

저장 후 확인

5. App.js 수정

> App div 빼고 다 지우고 아무글자나 써보기

>import logo from './logo.svg'; 는 logo.svg 안쓸거니까 지워도 됨

 

확인

6. 컴포넌트 추가

 

목적

hello를 쓰는 기능을 가진 컴포넌트 추가

 

6-1. 파일 추가

src => 컴포넌트이름.css, 컴포넌트이름.js 파일 추가

 

6-2. Hello.js 내용 추가

 

import React from 'react'; // react 사용
import './Hello.css'; // css 포함

function Hello() { // 함수
  return ( // 리턴 값
    <div className="Hello"> // JSX
      hello
    </div>
  );
}

export default Hello; // Hello 함수 내보내기

 

6-3. App.js 내용 변경

import React from 'react';
import './App.css';
import Hello from './Hello'; // 추가

function App() {
  return (
    <div className="App">
      <Hello/> // 추가 => Hello 함수의 리턴 값이 이자리에 들어감
    </div>
  );
}

export default App;

6-4. 저장 후 확인

<div id="root"> // index.js의 root
    <div class="App"> // App.js의 App
        <div class="Hello">hello</div> // Hello.js의 Hello
    </div>
</div>

컴포넌트 추가 방법

 

1. 컴포넌트 파일 추가

2. 컴포넌트 파일에서 export

3. 기존 파일에서 import 후 JSX로 내용 추가

[JSX 링크]

 


 

실습 2

 

1. index.html 파일 변경

<div id="root1"></div>

> 앱 이름 뒤에 1을 붙였음

 

2. index.js 파일 변경

import App1 from './App';

ReactDOM.render(<App1 />, document.getElementById('root1'));

 

3. App.js 파일 변경

import React from 'react';
import './App.css';
import Hello from './Hello';

function App1() { //변경
  return (
    <div className="App1">//변경
      <Hello/>
    </div>
  );
}

export default App1;//변경

 

4. 저장 후 확인

<div id="root1">
    <div class="App1">
        <div class="Hello">hello</div>
    </div>
</div>​

 


 

결과 분석

 

이렇게 import해서 사용하는 JSX의 태그와 (<App1/>)

자식 컴포넌트에서 export하는 함수의 이름이 같으면 됨 (export default App1;)

> 함수가 아닌 class로 컴포넌트를 작성해서 export 해야하는 경우가 있음

> [state, props 링크]

 

 

 


정리

저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

다음 포스팅은 'JS & JSX 문법' 입니다.

+ Recent posts