[TIL] React 초급: 마무리

13. 마무리

• React의 불변성
  • 배열과 객체는 불변성을 가진다.
  • 프로젝트가 고도화되고 복잡해질수록 원본 배열이나 객체, 값을 쉽게 수정할 수 있으면 심각한 이슈가 발생할 수도 있다.
  • 쉽게 원본 데이터를 변경하지 않고 원본 데이터를 복제해서 사용하도록 하여 심각한 이슈 발생을 사전에 방지하도록 해야 한다.

📌 immutable.js 알아보기

• Router

  • 하나의 url로 이루어진 싱글 페이지 웹 애플리케이션(SPA)의 장단점

    • 장점: 페이지를 전환할 때마다 네트워크를 새로 로딩하지 않아도 된다.
    • 단점: url이 하나이기 때문에 특정 페이지를 찾아가기 힘들다.

    👉 다른 url을 사용하여 각 url마다 다른 UI가 보여지도록 할 수 있지만(MPA), 그렇게 여러 개의 화면을 띄우면 JS의 비중이 커지면서 그에 따른 단점이 생긴다.

  • 써드파티인 React Router처럼 라우팅을 해주는 라이브러리를 이용해서 각 url에 따른 페이지를 맞게 렌더링해줄 수 있다.

📌 React Router 알아보기

• npm run eject 사용

  • create-react-app의 숨겨진 설정을 보고 수정할 수 있게 해주는 명령어
  • 한 번 eject를 하면 다시 원래대로 돌아갈 수 없다.

• Redux

  • 중앙에 저장소 하나를 생성하여 저장소에 모든 컴포넌트를 직접 연결시켜 저장소의 데이터를 변경하면 해당 데이터와 연관된 모든 컴포넌트에 영향을 미칠 수 있게 해준다.

• React Server Side Rendering

  • 서버 쪽에서 웹 애플리케이션을 만들어서 클라이언트 쪽으로 전송하는 방식으로 웹 애플리케이션을 구동할 수 있게 해준다.
  • 장점
    • 개발 시간 단축
    • 자바스크립트 애플리케이션의 특성인 로딩이 필요없다는 점을 유지할 수 있음
    • robot에 친화적

• React Native

  • 모바일 애플리케이션과 웹 애플리케이션을 모두 만들 수 있다.

👩‍🎓 완강 후기

목표가 프론트엔드 개발자가 되는 것이었는데도 정작 프론트엔드에서 쓰이는 React나 Vue 같은 라이브러리는 내가 그간 공부했던 곳의 커리큘럼에 단 한 번도 포함되지 않았었다. 그래서 슬프게도 반강제(?)로 백엔드 개발자가 되어가는 느낌이었는데 이번에 인턴을 하게 된 곳에서는 React를 사용한다는 것이 아닌가! 더군다나 개발 중인 서비스가 백엔드는 거의 개발완료 상태이고 프론트엔드만 남은 상황! 나한테는 공부하면서 개발해보기에 정말 최적이었던 것!

그렇게 해서 대표님의 권유 아닌 권유로 생활코딩 강의로 React 첫 발을 떼게 되었는데 갑자기 업무가 바껴서(🤦‍♀️) 바뀐 업무를 하느라 생각보다 완강하기까지 시간이 오래 걸렸다. 하지만 공부하면서 확실히 왜 React가 많이 쓰이는지, React로 기본적인 개발을 하는 방법은 무엇인지는 알게 된 것 같다. 그리고 실습 위주의 짧은 강의들이 이어지다 보니 가끔 언급되었던 immutable이나 redux 같은 라이브러리들, Array.from()이나 splice()같은 메소드들에 대해서 아주 자세히 다뤄지지는 않다 보니 혼자 따로 찾아보면서 또 공부가 되고 재미도 있었다.

물론 아직 초급 단계라서 당장 뭔가를 멋있게 해낼 수는 없겠지만 계속 공부하면서 실습해보다 보면 마스터할 수 있겠지...? 계속 강의 더 찾아 들으면서 더 공부해보고 리액트 활용하는 클론코딩도 해봐야겠다.

일단 강의를 하나 끝냈으니까 오늘은 기쁜 마음으로 쉬어야지!