React Component

React Component

 

 

오늘도 먼저 잠깐 코드 작성 시 주의점을 살펴보고 가자.

우리가 지금 return 문 안의 소괄호 안에 HTML 태그를 사용 중인데,

반드시 하나의 HTML 태그만 시작되고 끝나야 한다.

아래와 같은 경우는 허용하지 않는다.

return (
    <div></div>
    <div></div>
    <div></div>
    <div></div>
);

위 처럼 하려면, 4개의 div 태그를 감싸는 큰 div 태그를 만들고 그 안에 집어넣어야 한다.

 

이제 Component를 사용하는 것을 보자.

 

 

1. 사용법

function Example() {
    return (
      <div></div>
    );
}

위와 같이 선언하고, 아래 처럼 사용한다.

    //...~~
    <Example></Example>
</div>

이러면 리턴문에 있는 값이 내가 컴포넌트를 사용 중인 곳에 반환된다.

 

그리고 여러개의 태그가 나열될 때, 전체를 묶는 태그를 fragment 문법으로 작성하면, 그냥 <></>만 쓰면 된다.

return (
    <>
        <div></div>
    </>
);

 

그리고 컴포넌트도 화살표 함수를 지원한다.

const temp = () => {
    return (
        <div></div>
    );
}

 

 

2. 사용시 주의점

컴포넌트의 첫 글자는 대문자로 시작한다.

소문자로 할 경우 렌더링이 제대로 되지 않는다.

 

새 컴포넌트를 만들 때 function App()과 동등하게 만들면 된다.

생긴거만 봐도 알겠지만 당연히 App()도 하나의 컴포넌트다.

 

객체지향이랑 비슷한 느낌이었는데, 찾아보니 그 정도는 아니지만 얼추 비슷한 게 맞다고 한다.

 

 

 

3. 사용처

그렇다면 어떤 것들을 component로 만들면 좋을까??

 

1. 반복해서 사용되는 HTML

2. 자주 바뀌는 HTML UI

 

 

 

4. 단점

유용해 보이는 component도 당연히 단점이 있다.

state를 사용하려고 할 때, state의 스코프 때문에 문제가 생긴다.

 

 

예시

let [글제목, 글제목변경] = useState(['8월 20일 노트', '8월 21일 노트', '8월 22일 노트']);

지금 이 state는 App에서 선언되었다.

 

function Example() {
    return (
      <div></div>
    );
}

따라서 이 컴포넌트에서 글제목을 사용하려고 하면 당연히 사용이 안된다.

 

상위 컴포넌트에서 만든 state를 이용하려면 props 문법을 사용해야 한다.