7 - 리액트 기초 개념: 컴포넌트, JSX

1 - 컴포넌트

1. App.js 파일로 컴포넌트 정의 알아보기

App.js 파일 열고 App()함수와 App()함수가 반환하는 값 보기

App() 함수가 정의된 것이고,

<div><h1>Hello</h1></div>를 반환

이 과정이 App컴포넌트 정의라 한다.

 

2.index.js 파일로 컴포넌트 사용 알아보기

index.js 파일 실행하고 <App />이라는 부분 보기.

<App />을 ReactDOM.render() 함수의 첫 번째 인자로 전달하면 App 컴포넌트가

반환하는 것을 화면에 그릴 수 있다.

 

App 컴포넌트가 그려질 위치는 ReactDOM.render() 함수 두 번째 인자로 전달하면 된다.

함수를 해석해보면 'App 컴포넌트는 아이디가 root인 엘리먼트에 그려질 것이다'

root인 엘리먼트는 index.html에 있다.

 

리액트는 컴포넌트와 함께 동작하고, 리액트 앱은 모두 컴포넌트로 구성된다.

 

 

2 - JSX

컴포넌트를 만들려면 자바스크립트와 HTML을 조합한 JSX 문법 사용.

 

1. Potato 컴포넌트 만들기

1. src 폴더 안에 Potato.js라는 새 파일을 만든다.
2. 파일 첫글자는 반드시 대문자로 한다.
3. 파일 열고 맨 위에 import React from 'react'; 입력한다.

 

 

2. Potato() 함수 작성하기.

순서대로 한다.

 

1. 맨 위에 import React from 'react'; 입력한다.

import React from 'react';

이 코드를 입력해야 리액트가 JSX를 이해한다.

 

 

2. 이름은 대문자로 시작한다.

import React from 'react';

function Potato() {
}

 

 

3. Potato 컴포넌트가 JSX를 반환하도록 한다.

import React from 'react';

function Potato() {
	return <h3>I love potato</h3>;
}

return <h3>I love potato</h3>;  이 문법은 HTML이 아니고 JSX이다.

 

 

4. 마직막 줄에 export default Potato; 입력한다.

import React from 'react';

function Potato() {
	return <h3>I love potato</h3>;
}

export default Potato;

export default Potato; 를 추가하면 다른 파일에서 Potato 컴포넌트 가능

 

 

5. Potato 컴포넌트 사용하기

---------------------------

*오류가 나는 방식 

index.js 파일을 열어서 Potato 컴포넌트를 어떻게 사용할지 코드를 본다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

마지막줄 (<App />...) 여기에 <Potato />를 추가한다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App /><Potato />, document.getElementById('root'));

이렇게 작성하면 오류가 발생한다.

리액트는 최종으로 한개의 컴포넌트를 그려야하는데

지금은 두 개의 컴포넌트를 그리려 해서 오류 발생

Potato 컴포넌트는 App 컴포넌트 안에 넣어야한다.

---------------------------

 

index.js 파일을 다시 원래대로 돌린다. <Potato /> 삭제.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

 

 

6. App 컴포넌트에 Potato 컴포넌트 임포트하기

- App.js에 다음과 같이 수정한다.

import React from 'react';
import Potato from './Potato';  <---- 추가해줌

function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

export default App;

./Potato에서 ./는 현재 파일이 있는 폴더란 뜻(같은 경로)

Potato.js와 App.js는 같은 폴더에 있음.

 

 

- App 컴포넌트에 Potato 컴포넌트 포함시키기

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

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Potato />        <--------- 여기 추가
    </div>
  );
}

export default App;

 

해당 부분에 <Potato /> 코드 추가하고 브라우저 확인

사진처럼 나타나면 성공.

 

 

7. Potato.js 파일 삭제하고 App.js 파일에서 컴포넌트 import하는 코드 지우기

1. vs코드에서 경로에 있는 Potato.js 파일 삭제

우클릭해서 삭제 한다.

그럼 src에 남는 파일은 App.js와 index.js  만 있음

 

2. App.js 에서 import Potato from './Potato'; 삭제 해준다.

import React from 'react';
// import Potato from './Potato'; // <------ 삭제해준다.

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Potato />
    </div>
  );
}

export default App;

저장하고 브라우저를 보면 오류가 난다.

App.js 파일에 Potato라는 것이 정의되지 않아서 컴파일 실패가 뜬다.

Potato.js 파일 삭제하고 App.js 파일에서 import...'./Potato'; 코드를 삭제했지만

여전히 App.js 파일에서는 Potato 컴포넌트를 사용하고 있어서 오류가 뜬다.

 

이 오류를 해결하기 위해 App.js 파일 안에 Potato 컴포넌트를 만든다음 Potato 컴포넌트를 사용해본다.

 

 

8. App 컴포넌트 안에 Potato 컴포넌트 만들기

App.js 파일에 Potato() 함수를 만들어 주면 된다.

import React from 'react';

function Potato() {
  return <h1>I like potato</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Potato />
    </div>
  );
}

export default App;

위처럼 바뀌면 성공.