[리액트 클린코드 #1] 컴포넌트 관리 Extension

리액트 클린코드에 관한 고민은 항상 가지고 있었다. 

중구난방으로 코드를 짜다보면 코드가 So dirty... 해지기 때문에 기분이 안 좋아진다.

 

그러던 와중 너무 늦게 알아서 쫌 쫘증나는 extension...모두들 미리 알아서 언렁 써먹길...

아직 서버 연결을 하지 않은 컴포넌트라 코드가 더 더러운게 사실이지만 어쨌든!

---

내가 소개하고 싶은건 glean extension이다 누가 개발했는지는 몰라도 천재가 확실함

 

일단 glean을 설치한다.

 

 

 

이것을 어떻게 쓰는지 살펴보자. 아래의 코드는 웬만한 프로젝트에서 가지고 있는 Header의 navBar 코드이다.

 

import React, { useState } from 'react';

export const Header = () => {
    const [count, setCount] = useState(0);
    setCount(24);

    return (
        <main>
            <nav className="navbar">
                <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>{count}</li>
                    <li>
                        <div className="dropdown">
                            <ul>
                                <li>item 1</li>
                                <li>item 2</li>
                                <li>item </li>
                            </ul>
                        </div>
                    </li>
                    3
                </ul>
            </nav>
        </main>
    );
};

 

물론 위의 코드를 그대로 써도 되지만 Header 컴포넌트에 nav이외에 다른 레이아웃이 많이 존재한다면 한눈에 구조를 파악하기 힘들고,

나중에 수정할 때도 헤맬 수 있다. 이제 glean을 써보자.

 

1. 컴포넌트로 바꾸고 싶은 tag 요소들을 드래그한다.
2. 왼쪽에 표시된 형광들을 눌러 Extract Component를 선택한다.
3. 선택 후  상단에 뜨는 이름 입력란에 컴포넌트 이름을 작성한 후 엔터를 누른다.
4. 기존 코드의 가장 아래부분에 추출된 컴포넌트 함수가 뜬다. 

 

화질 ... ㅠ

 

Header 코드가 아래와 같이 변한다. 필요에 따라 폴더를 하나 더 생성해서 export & import 하는 것도 좋을 것 같다.

 

import React, { useState } from 'react';

export const Header = () => {
    const [count, setCount] = useState(0);
    setCount(24);

    return <NavBar count={count} />;
};

function NavBar({ count }) {
    return (
        <main>
            <nav className="navbar">
                <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>{count}</li>
                    <li>
                        <div className="dropdown">
                            <ul>
                                <li>item 1</li>
                                <li>item 2</li>
                                <li>item </li>
                            </ul>
                        </div>
                    </li>
                    3
                </ul>
            </nav>
        </main>
    );
}

 

이제 없으면 못 사는 Extension...