개발 스터디 'TimCookie' 저장소 정리 전 백업_23.07.09

부끄러운 예기지만 리액트 기반의 기술 스택으로 취업을 준비하고 있고, 리액트를 사용하면서도 리액트의 정체성에 대해서 제대로 알고 있지 못했다.

발단

문득 리액트로 개발한 프로그램의 프레임 워크를 교체할 수 있는 지에 대해서 궁금해졌다.
리액트를 사용하고 있는 만큼 그것이 어려울 것이라는 것은 예감을 했으나 확인해야 했다.

ChatGPT's answer

(물론 답변을 그대로 옮기거나 인용하는 것은 나 또한 껄끄러운 일이다. 그러나 현재로서 글의 방향을 위해 지금은 이렇게 싣는다.)

전반적인 내용은 예상한 것과 비슷했다. 아직 정확히 알고 있진 않으나 코드의 흐름과 생명주기가 다르기 때문에 어렵다는 내용인것 같다.
하지만 걸렸던 점은 리액트가 UI렌더링을 위한 '라이브러리'라고 한 것.

React = Library or FrameWork (?)

아직도 그러한지는 모르겠지만 리액트를 시작하며, 이전의 시대를 풍미한 라이브러리 '제이쿼리'와 비교하였던 것으로 기억한다.

제이쿼리 = 라이브러리
리액트 = 프레임 워크

이것이 기존에 내가 알고 있는 정보였다.

그래서 다시 물었고, 추가적으로 검색해 보았다.
나무위키_리액트

정보 검색이라고 꼴에 한다는게 챗GPT와 나무위키라니 참 잘하는 짓이다.

결과적으로 내가 알고 있는 리액트 = 프레임 워크 의 공식은 틀린 것이었다.

객체형 프로그래밍의 뒤를 이어, 우리가 배웠고, 현재 쓰이고 있는 것으로 알고 있는 함수형 프로그래밍의
'재사용 가능한 컴포넌트'개념과 맞물려, UI렌더링에 초점을 맞춘 '라이브러리' 가 리액트인 모양이다.

다시 돌아가서

그렇다면 라이브러리(=호출 가능한 JS 함수 조각들의 모음)일 뿐인 리액트를 프로그램에서 대체하는 것은 왜 어려운 것일까.
프레임 워크가 아니라고 하는데?

줄여 보자면..
'리액트' 자체는 라이브러리가 맞다. (React.js = Library)
하지만 소위 말하는 '리액트 생태계'는 프레임 워크 처럼 동작한다.

리액트를 사용하면서 같이 사용하는 수많은 라이브러리(리덕스, 리액트 라우터, 등등)들로 구성된 프로그램 내부의 생태계를 전환하는 것이 어려운 모양이다.

야무쌤의 리액트 수업의 초반부, 선생님께서 리액트 처럼 생각하는 법, 리액트의 존재 의의에 대해서 굳이 강조하고 오랜 시간 예기하신 부분이 조금은 이해가 될 것 같다는 착각이 든다.

새로운 의문

야무쌤이 남겨주신 노션 문서에 보면 리액트 프레임 워크(?)에 넥스트.js 가 있다.
CSR 기반의 리액트에서 SSR적인 부분을 보완하기 위해 Next.js를 도입할 수 있다(함께 사용할 수 있다). 정도로 알고 있었는데.
그렇다면 리액트.js 와 넥스트.js 는 정확히 어떤 관계인 것인가?

넥스트.js의 강의를 사두기만 하고 듣지 않았던 과거가 아쉽다

(작성중...)
글이 산으로 가는것 같아 이쯤에서 마무리 할려고 합니다.