리액트를 다룰수록, 컴포넌트를 만들고 코드를 만들 수록, 무작정 만드는 것이 아닌
처음부터 설계를 잘 해야할 것 같다는 필요성을 느꼈다.
그리고, 나만 느린 것 같고, 뭔가, 공부량이 많아지면서 배우는건 많은데 어디에 어떤걸 적재적소로 써야할지,, 자꾸 봐도 헷갈리기만 했다.
나 자신에게 요즘 해주고 싶은 말 ~🧚♀️
GPT :
처음에는 무슨 말인지 머리로는 알겠는데,
막상 실무나 프로젝트에서 보면 "이게 어디서 나왔더라?" 하고 멍해질 때 많아.
근데 정말 괜찮아! 다들 그렇게 시작해 😌
지피티 고마워 .. 🩷
✨ 진짜로 익숙해지는 타이밍은?
| 처음 1~2주 | "useState", "useEffect" 뭐가 뭐지..? 기억하기 바쁨 😵 |
| 3~4주 | 직접 쓰고, 반복하면서 "아~ 이럴 땐 useRef 쓰면 되겠다" 하는 감이 생김! |
| 1~2개월 | 간단한 커스텀 훅도 만들 수 있고, 코드 보면서 "아 이건 상태 관리용이네" 눈에 들어옴 👀 |
| 3개월+ | 실무 코드 보면서도 구조가 자연스럽게 이해되고, "어? 이건 나도 재사용할 수 있겠다!" 느낌이 옴 ✅ |
✨천천히 익숙해지려면 이렇게 해보자.
- 직접 예제 따라 써보기
→ 지금처럼 useCounter 같은 간단한 것부터 반복! - 눈으로만 읽지 말고, 손으로 쳐보기
→ 실제 코딩하면서 "아 이건 setState!" 하고 손이 기억하게 돼. - 하루에 한 개만 확실히 익히기
→ 예: 오늘은 useRef, 내일은 useEffect - 미니 프로젝트 만들어보기
→ 투두리스트, 카운터, 간단한 폼 등 만들어보면서 자연스럽게 쓰게 돼.
진짜.. 직접 해보는게 가장 중요한 것 같음. 일단 어려워보이는 걸 따라서 해보려고 하다보면 자꾸 익숙해진다.
익숙함은 많이 써봐야 생겨요.
모를 땐 "나만 느린가?" 생각 들 수 있지만,
사실 대부분이 **"반복"**을 통해 알게 되는 거야!
너무 잘하고 있어 Jane 🩷
지금처럼 궁금한 거 바로바로 물어보면서 따라오는 속도면,
진짜 곧 "어? 이건 내가 전에 만든 커스텀 훅이랑 비슷하네!" 하는 날이 와 😊
고마워 나의 지피틔,,🐰🫶🏻
리액트에서는 컴포넌트 분리나 코드 설계를 할 때,
무조건 그림이나 도식화를 해야 하는 건 아니지만, 머릿속에서 구조를 정리해두는 게 굉장히 중요하다.
리액트 컴포넌트 설계 & 분리 팁
❶ 화면을 영역으로 나누기
→ 화면을 보고 시각적으로 어떤 영역으로 나눌 수 있을지 먼저 생각해보자.
(손으로 종이에 네모네모 그려도 좋다!)
예시)
- Header
- Sidebar
- MainContent
- PostList
- PostItem
- Footer
이렇게 나눈 게 곧 컴포넌트 단위가 된다 👩🏻💻
❷ 단방향 데이터 흐름을 상상해보기
부모 → 자식 방향으로 props가 어떻게 흘러갈지 생각해보자.
예를 들어,
- PostList는 posts 데이터를 받는다
- PostItem은 post 하나를 props로 받는다
이걸 생각해두면, props 구조나 상태 관리 위치를 정하기 쉬워져요.
❸ 컴포넌트 재사용 가능성 체크
→이 컴포넌트가 다른 화면에서도 쓸 수 있을지 생각해보세요.
- 자주 쓰일 것 같으면 → Generic하게 분리
- 여기서만 쓸 거면 → 해당 페이지 폴더 안에서만 사용
❹ 작게 나눌수록 좋다
→ 리액트는 컴포넌트가 작을수록 관리가 쉽고, 가독성이 좋아짐
하나의 컴포넌트에 100줄 이상 넘어간다면 분리를 고민해보기
❺ UI/로직 분리하기
→ 가능하면 화면을 그리는 부분과 데이터를 처리하는 부분을 분리해두면 좋다
- PostList.jsx → UI
- usePosts.js → 데이터 fetch / 상태 관리
이렇게 분리하면 테스트나 유지보수도 훨씬 편해진다.
컴포넌트 분리할 때.. 복잡 했었다 ㅠ
리액트 컴포넌트 연관관계 쉽게 이해하기 공부
리액트에서 트리 구조의 컴포넌트 간 연관 관계를 쉽게 이해하고 공부하는 방법은 여러 가지가 있어.
특히 “이 페이지에선 어떤 컴포넌트들이 렌더링되고, 어떻게 연결되어 있는지”를 파악하고 싶다면?
❶1. Component Tree 시각화 도구 사용
- React Developer Tools (크롬 확장 프로그램)
- 설치하면 브라우저 개발자 도구에 “Components” 탭이 생겨.
- 어떤 컴포넌트가 어떤 부모 안에 있고, 어떤 props를 받는지 한눈에 볼 수 있어.
- 어떤 상태(state)나 context가 어디서 사용되는지도 보여줘서 진짜 유용해.
💡 특히 “이 페이지가 열릴 때 어떤 컴포넌트들이 렌더링되는지” 알고 싶을 땐, 이 도구로 페이지 이동하면서 트리 변화를 보면 좋아.
❷ 프로젝트 구조를 시각화해보기
- 예를 들어 이런 식으로 그려보면 좋아:
<App>
└── <Router>
├── <Header />
├── <MainPage>
│ ├── <PostList />
│ │ └── <PostItem />
│ └── <Sidebar />
└── <Footer />
- 직접 다이어그램을 그려서 정리해보면 구조가 눈에 들어오고, 컴포넌트 재사용도 어디에서 할 수 있는지 보이기 시작해.
❸ 라우터 흐름 정리하기
- 예를 들어 react-router-dom을 사용 중이라면, 다음과 같이 route에 따라 어떤 페이지가 렌더링되는지 코드와 함께 정리해봐.
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/posts" element={<PostPage />} />
</Routes>
이걸 트리 구조랑 연결해서 생각하면,
- HomePage에는 어떤 컴포넌트들이 포함돼 있는지
- PostPage가 불릴 때 내부에서 어떤 fetch 작업이나 컴포넌트들이 작동하는지 를 자연스럽게 이해할 수 있어.
❹코드베이스 탐색할 때 팁
- 컴포넌트마다 주석 달기
- 파일명과 역할 통일시키기 (예: PostList.js, PostItem.js)
- 각 페이지 폴더 안에 관련 컴포넌트 묶기 (/pages/PostPage, /components/Post 등)
❺ 연습 프로젝트 해보기
직접 간단한 블로그, Todo앱, 마켓 플레이스 같은 걸 만들어보면서:
- 어떤 컴포넌트가 어떤 데이터로 움직이는지
- 부모-자식 구조에서 어떻게 props를 전달하고 상태를 관리하는지 를 체감하는 게 최고야.