[ReactJS 기초] - Component

 

리액트로 만든 페이지는 컴포넌트들로 구성되어있다.

페이지 단위로 구성하는 것이 아니라 각 부분을 컴포넌트로 만들어서 하나의 페이지로 조립하는 것이다.

이렇게 컴포넌트를 사용하게 되면 각 컴포넌트끼리 분리되어있기 때문에 재사용성도 높아지고 유지보수도 하기 쉬워진다.

 

현재 리액트 파일을 보면 App.js라는 하나의 컴포넌트로 구성이 되어있는데,

이 App.js에서 App이라는 함수를 export 해서 index.js에서 import해주고 있다.

이렇게 함수형으로 만들어진 컴포넌트를 함수형 컴포넌트라고 하고 모든 컴포넌트의 이름은 대문자로 시작한다.

함수에서 return하고 있는 코드들을 보면 HTML같기도 하고 JavaScript 같기도 한데

이것을 바로 JSX(JavaScript XML)이라고 한다.

 

다만 HTML과는 다르게 스타일을 적용하기 위해서는 적용하려는 값들을 객체로 전달해야 적용할 수 있다.

또 CSS처럼 - 를 사용하는 것이 아니라 카멜case를 사용해야 한다.

import './App.css'; function App() {   return (     <div className="App">       <h1 style={{           color: "red",           backgroundColor: "green"       }}>Hello Mike.</h1>     </div>   ); } export default App;

 

 

위에서 Mike라고 작성했던 부분을 변수를 사용해서 나타낼 수도 있는데 변수는 { } 중괄호 안에 사용해줘야 한다.

function App() {   const name = "Tommy";   return (     <div className="App">       <h1 style={{           color: "red",           backgroundColor: "green"       }}>Hello {name}.</h1>     </div>   ); }

 

변수를 선언했을 때 숫자나 문자열은 잘 표현이 되지만 boolean이나 객체는 표현할 수 없다.

 

 

 

자 이제 본격적으로 컴포넌트를 생성해보자!

 

 

 

우선 src 아래에 component 폴더를 생성해준다.

 

 

컴포넌트 생성하는 방법은 간단하다. 

1. JS 파일을 생성한다.

2. 파일 안에 사용하고자 하는 함수를 작성한다.

3. export js 파일을 해준다.

 

 

Hello 컴포넌트를 만들어 줄건데 컴포넌트의 함수를 생성하는데는 세가지 방법이 있다.

 

1.

const Hello = function() {     return<p>Hello</p>; }; export default Hello;

이렇게 함수의 형식으로 작성해도 되고,

 

 

2.

const Hello = () => { return <h2>Hello</h2>; }; export default Hello;

화살표 함수를 사용해도 되고,

 

 

3.

export default function Hello() {     return <h2>Hello</h2>; }

바로 함수를 export 하는 방법을 사용해도 된다.

 

함수를 만들면 무조건 return 값이 필요하다. 

다른 컴포넌트에서 사용할 값들을 return으로 전달해줘야하기 때문이다.

 

 

함수를 만들어줬다면 컴포넌트를 사용해보자

App.js import './App.css'; // 사용할 컴포넌트를 import 하고 import Hello from './component/Hello'; function App() {   return(     <div className="App">        //  <컴포넌트이름></컴포넌트이름> 형식으로 컴포넌트를 사용한다.       //  컴포넌트에 따로 써주는 내용이 없을 때는 self-close를 해준다.       <Hello />     </div>   ); } export default App;

 

Terminal을 열어서 npm start를 쳐주면 아래의 사진처럼 홈페이지에 Hello가 잘 표시되는 것을 볼 수 있다.

App.js 에서 Hello 컴포넌트를 사용한 모습

 

 

이번엔 App.js가 아닌 다른 컴포넌트에서 새로 만든 컴포넌트를 사용해보자.

 

 

 

component 폴더 안에 Welcome.js 파일을 만들고 아래의 코드를 작성한 후 

Welcome.js export default function Welcome() {     return (         <h3>Welcome</h3>     ); }

 

Hello.js에서 사용한다.

Hello.js import World from "./World"; export default function Hello() {     return (         <div>             <h2>Hello</h2>             <World />         </div>     ); }

JSX는 하나의 태그로만 만들 수 있기 때문에 div 태그로 감싸서 사용해준다.

 

 

지금까지 만든 컴포넌트들의 형태를 보면 컴포넌트 안에 또 다른 컴포넌트가 있는 것으로 볼 수 있다.

 

 

 

 

이렇게 한번 만들어 둔 컴포넌트는 여러군데에서 여러번 사용해줄 수 있다.