[React] Component : 코드가 너무 길어질때 사용하면 깔끔해진다.

리액트에서는 코드가 너무 복잡하거나 길어질때, 하나의 컴포넌트를 담아 깔끔하게 코드를 짤 수 있다.

 

- 만약 다음과 같은 코드에 <div>안의 글이 너무 많아서, 간단하게 줄이고 싶을때 쓰면된다.

import React from 'react';

export function App(props) {

  return (

    <div className='App'>

      <h1>Hello React.</h1>

       <div>

        안녕하세요 저는 아주 긴 콘텐츠예요.

        너무 길어서 컴포넌트를 분리했답니다.

      </div>

    </div>

  );

}

 

#1. 컴포넌트 생성하는 방법

1. 컴포넌트 생성

- App이란 함수 바깥에 (지금 메인 함수 바깥에) 새롭게 만들고 싶은 함수를 쓴다. 

- 형태는 App 과 같이 아래와 같은 형태로 쓰면 된다. 

- 컴포넌트 생성시 주의할 점은, retrun() 안에는 하나의 태그로만 감싸져야 한다는점! 두개의 태그가 병렬적으로 있으면 오류나니 유의하자

- 함수명은 대문자로 시작하는것이 국룰이라고 하니 맞춰주시길...

function 함수명(){
	return(
    	컴포넌트 내용을입력하세요.. 
    )
}

- 처음에 보여준 코드에 적용하면.. 아래와같이 써질거다. 

import React from 'react';

export function App(props) {

  return (

    <div className='App'>

      <h1>Hello React.</h1>

     

    </div>

  );

}

function Test(){

  return(

    <div>

      안녕하세요 저는 아주 긴 콘텐츠예요.

      너무 길어서 컴포넌트를 분리했답니다.

    </div>

  )

}

 

2. 컴포넌트 불러오기

- 컴포넌트는 정의한 함수명으로 불러오면 된다. 

<함수명 /> 혹은 <함수명></함수명> 의 형태로! 

- 아래에선 정의한 함수 이름인, <Test /> 로 불러왔다. 

import React from 'react';

export function App(props) {

  return (

    <div className='App'>

      <h1>Hello React.</h1>

      <Test />

    </div>

  );

}

function Test(){

  return(

    <div>

      안녕하세요 저는 아주 긴 콘텐츠예요.

      너무 길어서 컴포넌트를 분리했답니다.

    </div>

  )

}

- 실행결과, 예쁘게 컴포넌트가 나온다.

 

- 실습해보기

https://playcode.io/1532990