📄 [React] 리액트 맛보기 후기 2023. 10. 12. 18:55
팔이 좀 회복된 김에 5월~6월에 작성했던 옵시디언을 뒤적거렸더니 그때 만든 장난감이 나와서 잠깐 포스팅한다.
이 포스트는 리액트를 알려주는게 아니라 일기겸으로 남기는 글이라 배우기 위한 분들은 보다 전문적인 곳을 찾길 바란다.
리액트와 나와 컴포넌트형 프레임워크
전부터 프론트엔드 프레임워크를 하나 해보고 싶었다ㅎㅎ JSTL이나 Thymeleaf 말고 컴포넌트형을.. 한 개 써보긴 했는데 일본에서도 인지도를 잃어가는 센차터치.. 이 프로젝트했을 때 정말 고통스러웠다. 복잡도 있는 업무 시스템이었는데 공통 컴포넌트가 최소화 되지 않아서
(필요한 기능을 넣으려면 공통 컴포넌트를 수정하는 수 밖에 없었고, 그게 n년이 되다보니 조금만 건드리면 다른 화면에서 오류가 뜨는 괴물이 탄생..)
이 괴물 위에 계속 짐을 쌓아야하는 그런 프로젝트였다.
ㅎㅎ리액트라고 안 그럴 법은 없지만 일반적인 B2C나 뛰어난 개발팀이 있다면 저 사태까진 안 갈거같다.
각설하고 프로젝트 환경 이야기
본론
개발환경과 따라한 쿡북
- 개발환경 : VS CODE / GIT & SorceTree / node : v16.13.1 / npm : 9.6.7
- 📌초보자용 리액트
- 📌React공식문서 따라하기
- 📌공식문서
리액트는 강의도 많은데 대학생분들처럼 그걸 다 보고 따라할 시간은 안되서
특별히 뭘 만들고 싶던게 아니라서
특별히 뭘 만들고 싶던게 아니라서 원하는 Toy 기능만 만들어 보기로 했다. 내가 바라는 Toy는 목록/페이징/쿼리스트림/외부내부링크/기본컨포넌트 정도..?
화면 및 기능정의
ㅎㅎㅎㅎ회사에서 하던거에 비해서도 다른 개발 블로그에 비해서도 조악한 수준이라 좀 부끄럽다. 구현코자했던 핵심 기능을 좀 더 자세히 적어보면
1. 템플릿A에서 템플릿B로 GET/POST 로 데이터 전달 → 1. Path Variable TEST
2. 쿼리스트링 값변경하기 (setSearchParams) → 2. setSearchParams TEST
3. 목록과 페이지네이션 구현 → 3. List TEST > Post List
4. 비동기 전송 AJAX 구현 → 3. List TEST > User List
5. 그외 (기본컴포넌트 & 링크기능 테스트)사용한 라이브러리와 기능들
1) jsonPlaceHolder
- bankEnd Mock Data를 쏴준다 (마음에 쏙듬) 📌jsonPlaceHolder
json-server --watch db.json --port 8000
2) react-paginate
- 페이징 컴포넌트 📌공식문서
두가지를 합해서 프로토타입을 만들어봤다. Query String 값을 가져올 수 있는 hook : useLocation, useSearchParams 을 사용해서 페이징도 잘 되고 갯수조절도 잘 되는데.. 헤더에 쿼리스트림이 보이는게 마음에 안든다.. 페이징라이브러리를 바꿔서 다시 만들어 봤다.
3) React-js-pagination
- 페이징 컴포넌트 📌공식문서
이제 쿼리스트링 값이 안보이는데 문제는 n개씩 보기를 구현할 수가 없다. 이유는 2) 번은 페이징을 누를때마다 데이터를 요청받는 방식이고, 3) 번은 전체 데이터를 한번에 가져오는 방식 (SPA:Single Page Application) 이라.. 구현하라면 구현할 순 있겠지만 단순 페이징 만드는데.. 😂
이래서 센차프로젝트가 그렇게 힘들었나..
4) axios 으로 비동기 통신
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import UserList from '../components/UserList';
const Users = () => {
const [users, setUsers] = useState([]); //useState를 사용해 데이터 저장/출력
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
console.log(response);
setUsers(response.data); });
}, []);
// 자식 컴포넌트인 UserList에 users데이터를 props형태로 전달
return (
< >
<h1>Users</h1>
<UserList users={users}/>
</>
);
};
export default Users;5) select 컴포넌트에 관해서
위 3)의 문제를 해결하려다가 select 컴포넌트에 대해 조사하기 시작했고 이쯤되니 왜 화면을.. 보기좋게 만들어줘야하지..? < 란 스스로의 벽에 막혀서 기능 테스트만 진행했다.
새롭게 알게된 점? 인상 깊은 점?
리액트의 세계는 참으로 복잡하군..
ㅎㅎ 이게 아니라 새로운 걸 해봐서 좋았고, 리액트의 한계도 분명히 보인다.
기존 웹에서 되는 기능을 똑같이 SPA에서 어떻게 구현하면 좋을까..? (개발 시간 등의 문제)
컴포넌트 쌓기로 구현이 어려운 복잡한 화면을 그려야한다면? 공통팝업으로 사용할 수 없는 화면을 그려야한다면?
하지만 일반 게시판 형식의 웹사이트에선 컴포넌트형 개발이 확실히 이점을 가질 수 있을 것 같다.
물론 난 맛보기로 토이 프로젝트를, 실무에 아직 적용이 안된 16버전으로 해봐서 전문가의 소견이라 할 순 없겠다
- 리액트가 무거운 편이래서 배포만들고 개발자도구로 Spring 사이트랑 비교해봤다.
첫번째는 갓 만든 helloReact 패키지, 아래쪽은 달릴거 다 달린 국세청
