빙글빙글 돌아가는 Component

❓ 컴포넌트로 관리해야 하는 이유

컴포넌트로 파일을 여러개 쪼개서 관리하는 이유는 뭘까? 사실 자바스크립트는 Single Page Application, 즉 단일 스크립트로 작성되는 언어인데 보기에도 어려운 분리 과정! 바로 다음과 같은 이유일 것이다.
1. 유지/ 보수
2. 성능 개선

예를 들어보자! 만약 내가 로그인 하나를 만들었을 때는 짧은 코드로 하나의 스크립트로 작성해도 크게 상관없다. 그런데 나중에 프로젝트가 커지고, 수 십 개의 기능이 추가된다면 해당 기능을 수정하려면 수천 줄의 코드를 스크롤하면서 찾아가야 한다. 완전 시간 낭비이고 비효율적이다.

반면, 컴포넌트화를 했다면 해당 기능이 있는 컴포넌트 파일을 찾아가서 수정하면 끝! 한 번에 해당되는 코드를 찾아갈 수 있다. 또한, index.html 파일을 단 한 번만 렌더링하여 사용할 수 있어서 페이지가 넘어가면 지연과 깜박임 없이 물 흐르듯한 홈페이지를 만들 수 있다.(하나의 페이지를 마치 여러 개처럼 보이는 눈속임이 가능하다. 대표적인 페이지는 React공홈, Netflix ..)

✍ 직접 그려보니 이해하기 쉬웠던 컴포넌트

React 수업을 들으면서 컴포넌트화 실습을 했다. 그런데 여러 개의 파일로 쪼개고 export와 import를 반복하면서 이해하기 어려웠다. 그래서 실습 파일(009)을 기준으로 직접 그리면서 머리에 넣으려고 했다. 덕분에 지금은 정리된 상태!

한 큐에 정리하자면 component파일에 각각 jsx로 분리해서 정리하고 -> Homepage.jsx에서 import 해서 모아준 다음에 -> App.jsx에서 Hompage.jsx를 불러오는 흐름

❗ 이슈이슈핫이슈

* 전체 완성 코드

App.jsx

import Homepage from "./pages/Homepage";
import Login from "./login/Login";

function App() {
  const user = {
    login: true,
    id: "hee970322@naver.com",
    nickName: "태태룽",
  }
  return (
    <div>
      {user.login ? <Homepage id={user.id} nickName = {user.nickName}/> : <Login/>}
    </div>
  );
}

export default App;

Hompage.jsx

import Header from '../components/header/Header';
import Main from '../components/main/Main';
import Footer from '../components/footer/Footer';
import './homepage.css';

export default function Homepage({id,nickName}){
    return(
        <div>
            <Header a = {id} b = {nickName}/>
            <Main/>
            <Footer/>
        </div>
    )
}

Header.jsx

import Header from '../components/header/Header';
import Main from '../components/main/Main';
import Footer from '../components/footer/Footer';
import './homepage.css';

export default function Homepage({id,nickName}){
    return(
        <div>
            <Header a = {id} b = {nickName}/>
            <Main/>
            <Footer/>
        </div>
    )
}

user.login = true일 때, Homgepage.jsx와 그 안에서 딸려오는 Header.jsx를 구현해야 하는 과정이다. 내가 처음에 겪은 상황은 다음과 같다.

처음에는 내가 Header.jsx파일에서 return 과정에서 {}를 잘못 사용하거나 App.jsx에서 실수를 했다고 생각하고 20분 동안 오타를 찾고 있었다. 결국 같은 회고팀 동기들에게 SOS를 쳤고, 나의 실수는 너무 어이가 없으면서 중요했단 부분이다.

위에 언급했듯이 내가 id와 nickName을 App.jsx에서 정의했다면 역순으로 App.jsx -> Homepage.jsx -> Header.jsx 순으로 순차적으로 정의를 해나가야 했는데, 나는 중간에 Homepage.jsx에서 변수 설정을 하지 않고 바로 Header.jsx로 값을 넘겼기 때문이다.

이렇게 쉽게 완성...! !! !