06. 기승전 리액트하다가 JS부터 다시 간다.
리액트부터 시작한다고 흥미와 성취가 파바박 될 리가 없지
개발자는 태반이 거짓말쟁이들이다. 나는 그걸 몰랐다.
대표님은 리액트가 요즘 많이 쓰니는 쉬운 언어라고 했다. 대표님은 C따위와 비교해서 쉽다고 말한 것 같다.
사수는 요즘 공식 홈페이지도 잘 되어 있고 상태관리를 잘 하면 금방 잘 할 수 있을 거라고 했다. 그리고서 두 사람은 내 손에 html 과 실전 리액트 책을 쥐어주었다.
문제의 책 두권이다.
왜 문제였냐면,
1. 2000년 초반 나모윕에디터와 제로보드 조합으로 취미용 홈페이지를 만들었던 나에게 너무 많은 기술 변화가 있었다. css의 획기적인 발전과 js의 신분상승은 적응하기가 어려웠다. 자바스크립트란 자고로 천대받는 기술이었는데 말이다.
2. 국내 리액트 강좌 중에서 유명하기도 하고 친절한 벨로퍼트님의 책이다. 책 자체는 나쁘지 않았다. 문제는 저 책이 1판이라는 점이다. hook 기술이 나오기 전의 책이라 class문법 위주에 변경된 사항이 꽤 많아 똑같이 따라해도 에러가 많았다. 저 책을 사실거면 무조건 최신판을 사셔라.
3. 자바스크립트js 공부를 하나도 하지 않고 시작했다. html 과 css는 그래도 학습하기 쉬운 레벨의 코드다. 일반적인 언어 공부를 할 때와 마찬가지고 코드를 읽고 짜는데 규칙이 간단하며, 위에서 아래로, 왼쪽에서 오른쪽으로 코드가 흘러가는 흐름이 있다. 이 단정한 코드에 자바스크립트가 끼어들면서 웹페이지는 동적인 효과를 얻을 수 있지만, 코드를 읽어가는 순서가 마구 뒤섞이게 된다. 그래서 지옥이 시작된다.
리액트를 하는데 자바스크립트를 이렇게 이야기 하는 이유를 천천히 설명하겠다. 우선 잘 되어있다는 공식 홈페이지를 먼저 둘러보자.
https://ko.reactjs.org/쨘
페이스북에서 만들었고 지금 가장 인기 좋은 라이브러리인 리액트를 설명하는 한 문장이다.
자바스크립트를 이용했지만, 기존 문법을 변형하여 자신들만의 독특한 문법과 구조를 만들었다. 그 문법의치명칭을 JSX라고 부른다. 무슨 뜻인지 아직도 정확하게 알지 못한다. 다만 자바스크립트를 기반으로 만들었지만 조금 더 (개발한 사람 입장에서는) 사용하기 편하다고 한다.
종종 어떤 강의에서는 리액트를 프레임워크라고 설명하지만 그렇지 않다. 공식홈페이지에서 이야기하든 리액트는 라이브러리이고, gatsby 라고 하는 프레임워크를 많이 쓴다. DB로는 graphQL과 Apollo를 이용하고, 그 다음에 내가 일하면서 많이 사용한 것들은 화면 연결을 위한 Router, 구글 애널리틱스 연동 react-ga4, css스타일을 위해 styled-components을 사용했다. tailwind도 좋았다. 다만 MUI나 ANTD, 부트스트랩처럼 이미 스타일이 정해져버린 것들을 가져다 사용하면 처음엔 편한 듯 하다가 결국엔 커스텀의 문제에 부딪혀서 사용하기 불편했다.
그래서 공식홈페이지 중반부터는 이 JSX 문법을 조금 맛보기로 보여주면서 리액트를 활용하여 구현할 수 있는 주요 기능들을 보여준다. 우선 같이 살펴보자.
참, 홈페이지에 나와있는 걸 그대로 복사해서 리액트 개발코드에 붙여넣으면 작동이 안 될 것이다. 그게 바로 리액트와 리액트 공식홈페이지의 가장 나쁜 점이다. 리액트 개발을 할 는 보통 create-react-app을 이용해서 모든 환경이 자동으로 구성된 폴더에서 코드를 작성하게 된다. 하지만 홈페이지에 있는 것은 자바스크립트가 읽을 수 있게 해 둔 것이다... jsx로 표시된 코드도 특정 파일의 적절한 위치에 넣어야 될 수도 있고 안 될 가능성이 높아 보인다. 그래서 복붙해서 멀쩡히 실행되는 화면 보기가 참 어렵다.
이 문제는 리액트 공식 홈페이지만의 문제가 아니라 리액트 코드를 공유하는 관련 사이트의 문제로 직결된다. 라이브러리 중 자주 사용되는 ANTD에서 제공하는 코드를 맨 처음 사용할 때도 헤맸다. 리디북스가 떠오르는 이 디자인 라이브러리는 사용하기 쉬운 중국제 반제품이다. 적절히 사용하면 큰 틀과 아이콘도 뚝딱 사용할 수 있다. 다만 괜찮아 보이는 걸 선택했다고 코드를 처음부터 끝까지 복붙하면 에러가 난다. 한줄씩 보고 필요한 부분을 골라서 동작할만한 위치에 넣어야한다. 이 코드는 좀 짧은 편이라 예시용으로 들고 와 봤다. JSX를 해제하면 좀 더 바닐라 자바스크립트에 가까운 코드를 볼 수 있다. 저는 아직도 자바스크립트를 몰라서 저게 무엇인고... 하면서 눈을 찌푸린다.
리액트에서 첫번째로 강조하는 것은 컴포넌트다. 리액트뿐만 아니라 개발자들은 이 컴포넌트 같은 작은 단위로 기능 개발하는 걸 좋아하는 것 같다. 이해는 간다.
위 버튼 하나가 컴포넌트다. 단 하나의 버튼 파일에 css를 더해주면 그 홈페이지에서 사용하는 모든 버튼의 규격과 스타일을 통일할 수 있고, 수정 또한 한 번만 하면 모든 곳에 적용되는 장점이 있다. 기존 html에서도 가능은 하지만 조금 더 수월한 느낌적인 느낌이 있다. 컴포넌트 단위로 쪼개서 만들다보면 레고 조각들로 쪼물거리며 장난감을 만드는 것 같다.
한 가지 단점은 처음에는 작은 컴포넌트라고 만들기 시작했는데 점점 기능이 덕지덕지 붙어서 어떻게 하면 효율적으로 파일과 기능을 분리할지 고민하게 된다는 점이다. 처음부터 완벽하게 기획을 해서 만들면 좋겠지만 그건 어디까지나 기획이기 때문에 만들다보면 틀어지기 마련인데, 잘 조절해야 되겠더라.
https://react.vlpt.us/이 내용은 제가 개인적으로 가장 많이 참고하고 있는 벨로퍼트님 강의자료이다. 이 글 시리즈를 적기 시작한 초반에도 올렸던 사이트이다. 요즘 한창 styled-component를 이용하고 있어서 매일 조금씩 적용해보고 있다. 나름 친절한 듯 하지만 나같은 완전 생초보는 보고 이해하기 어렵다. 그래서인지 강의가 뒤로 갈수록 개발을 시작한 지 얼마 안 되 보이는 초보들의 불져섞인 댓글이 넘쳐나는 걸 볼 수 있다. 쌈판이 난 곳도 있다. 난 초보의 편이었다. 나도 이해가 안 되는 부분이었으니까. 부가 설명을 해 주는 사람들이 종종 있긴 하지만 일일이 찾아서 봐야하니 초보자을 위한 강의는 아니므로 참고하시기 바란다.
보통은 생활코딩을 많이 추천하는데, 생활코딩 강의도 너무 초창기에 만들어 둔 것이라 참고하기 좋지 않다. 그럼 생초보는 뭐가 좋으냐.
유료강의는 비싸니 차라리 노마드에서 니코쌤이 하는 리액트로 영화사이트 만들기 강의를 들으시자. 저도 일하는 틈틈이 이 강의로 복며하고 있는데 최신 리액트 버전으로 재촬영해서 천천히 설명해주고 이전 강의에서 중요한 부분도 되새김해줘서 인내심을 가지고 따라하면 이해하기 쉽다. 가장 처음에 자바스크립트로 된 걸 설명해주는데 이 부분은 어려우면 그냥 넘어가도 좋다. 쓸 일이 없기 때문이다.
https://nomadcoders.co/벨로퍼트님 글에서도 보이듯 2019년 Hooks이라는 기능 도입으로 리액트가 함수형 문법으로 재정립되었다. 이 때문에 문법이 헷갈려 구글 검색을 하게 되면 옛날 자료와 공식 홈페이지 자료로 공부하는 사람의 코드와 최신 내용을 본 사람의 코드가 많이 달라 공부하다가 화가 나기도 하다... 함수형이랑 클래스형이랑 헷갈리면 생활코딩 강의가 좋았다. 제 코딩 수업의 절반은 생활코딩에서 도움받고 있다.
두번째 기능과 문제가 여기서 발생한다.
리액트에서 상태관리 빼면 할 말이 없을 정도다. props와 state로 값을 변화시키고, 변화가 있는 컴포넌트를 자동으로 렌더링해서 화면을 바꿔준다. 트위터에서 알티나 마음을 찍으면 숫자가 실시간으로 올라가는 걸 볼 수 있는데 그런 것이 바로 이런 기능이다. 전체 회면을 다 바꾸지 않고 특정 부분만 찾아서 바꾸어 데이터 소모량을 줄여주기 때문에 효율적이라고 칭한다. 다만 공식 홈페이지는 아직도 가장 처음 리액트가 상태관리를 했던 모양을 알려준다, 지금은 hooks 훅 기능이 나와서 더 이상 사용하지 않는 방법이다. 훅을 사용하게 되면 필기해 등 것처럼 코드 양이 줄게 되니 대부분의 강의나 책은 저 내용을 알려줄 것이다... 내가 본 구판 책은 아니었지만... 말이다... 절대 저같은 실수를 하지 마시라. 프로그램과 라이브러리는 구판을 써도 책과 강의는 무조건 최신판...
아무튼 상태관리가 중요한데 props와 state만으로도 빡시니 redux는 무리해서 노력하지 말자. 이거 없이 어떻게든 할 수 있다. 벨로퍼트님의 투두리스트는 리덕스 기능을 써서 어려우니 좀 더 쉽게 설명한 곳이 있다. 사실 내가 리덕스가 부담스러워서 그런 거 맞다...
이 분은 무작정 코드만 시작하는 게 아니라 프로젝트를 어떻게 구성하고 파일들을 만들고 대이터를 넘길 것인지 구조 짜는 것부터 같이 고민하는 것을 배울 수 있어서 좋았다. 리액트는 투두리스트를 만드는 것 하나만으로 중요 기능을 다 활용해 볼 수 있으니 여러 가지 방법으로 만들어보자. 도움이 되긴 되더라.
https://memostack.tistory.com/249아니면 드림코딩에서 해주는 리액트 강의도 좋다. 이 분은 코딩을 간단명료하게 하면서도 상세하게 알려줘서 기본 개념을 잡아가기 좋다.
세번째는 앞서 이야기 한 두 가지 기능을 가지고 투두리스트를 만들 수 있다고 알려준다. 여기서 보면 리액트의 코드구조가 좀 남다른 것을 알 수 있다.
코드는 기본적으로 위에서부터 실행이 되서 다른 프로그램을 하다보면 순서가 중요하다. 리액트도 나름 순서가 중요하긴 한데 이게 좀 특이하다. 화면에 사용될 변수와 기능들을 위 쪽에서 정의하고, render 에서는 html과 유사한 코드로 그것들을 활용한다. 여기서는 if와 for문을 사용할 수 없어서 연산자를 사용해야 한다. 그리고 변수가 위 쪽에 있다는 것은 render 되기 전에 모든 요소들이 다 실행되어야하는데 그 기본값이 null이면 에러가 난다... 빈 배열이라도 있어야하고 빈 칸이라도 있어야한다... 그게 없다면 호출하는 곳에서 조건값으로 0이든 뭐든 정의를 해 두어야된다.
```
{ 배열 ? '있다' : '없다' }
///
{ 나이 & n살 || 0 }
```
이 부분은 쿼리를 사용할 때에도 종종 나를 빡치게 하는 부분이다. 리액트와 같이 사용되는 쿼리는 그래프큐엘graphQL이다. 기존 사용되는 restfull방식에 비하면 좀 더 단순화되서 사용하기 편리하다. 형식은 json을 따르기 때문에 코딩을 오래한 사람도 나처럼 짧게 한 사람도 적응하기 좋은 것이 장점이다.
다만 리액트 특성 상 파일 상단에 설정한 값들을 미리 다 불러오는데, graphQL은 최상단에서 호출되어 값을 화면에 보여준다. 만약 값을 입력하는 input이라면 useMutation을 이용하면 읽기 에러가 나지 않는다. 리액트 내부에서 선언하는 변수가 비어있다면 빈 배열이라도 넣으면 해결되지만, 함께 사용하는 쿼리는 나 한 명 작업이 어렵다고 초기값을 바꿔달라고 할 수 없다... 망할 리액트.
쿼리는 useQuery를 이용해서 불러오고 값을 수정할 수 있다. useQuery로 불러온 값이 있다면 refatch로 값이 변경되는 것을 스스로 알아서 화면에서도 변경될 수 있게 한다. 그렇다고 null값이 받아와서 생기는 type error를모잡아주진 못했다. 이래저래 검색해서 찾은 것이 useLazyQuery이다. 이 쿼리를 쓰면 처음에는 호출하지 않고 있다가 나중에 쿼리값을 사용할 때 불러와서 에러가 나지 않는다. 적절하게 섞어서 활용하면 좋다.
이래저래 무작정 부딪혀보니 결국엔 리액트만의 문제가 아니라 자바스크립트가 부족하다는 걸 여러 부분에서 깨닫게 되었다. 리액트는 자바스크립트를 기반으로 만든 것이니 기본 구조나 규칙을 거기서 가져온 것이 많았다. 이해가 되지 않는 부분은 자바스크립트였다. `${변수}` 이런 거 말이다. 그리고 배열에서 키, 값을 빼내는 것과 수학 계산식과 날짜 데이터까지. 다양한 활용을 위해서는 자바스크립트도 같이 배워야하고 렌더링 되는 부분은 html이니 결국 홈페이지 기초인 html 과 css를 확실하게 배워두는 것도 필요했다.
게다가 이벤트라던가 조건문이나 연산자 등 기본 규칙과 문법은 물론 변수 이름은 카멜 케이스로 한다는 등 기본적인 것... 나 빼고 모두 아실테니 저만 반성하는 것으로 하자...
아무튼 올해에도 모두 다 각자 하는 일에서 좋은 성과 내서 이루는 바를 성취하시길 바란다.
