👨🏻‍💻 2주간 프로젝트를 마치고.. 

위클리 페이퍼 미션은 잠시 중단하고 기초 프로젝트를 끝내고서야 작성하게 되었다.
프로젝트를 진행하면서 이게 기초프로젝트가 맞나? 싶었다.
하지만 프로젝트를 끝낸 후 현재 나는 얼마나 성장했는가?
프로젝트를 마치고 나는 자신있게 리액트를 잘 다룰수 있다!까지는 아닌것 같다.
어느정도 코드흐름을 해석할 수 있을정도?.. 
다른 라이브러리 개념에 대해 학습을 한다면 학습 내용을 이해할 수 있을정도? 수준인것 같다.
그렇다. 즉, 한참 공부할 때다.
프로젝트를 마치고 8주차 , 11주차 위클리 페이퍼 미션을 받았다.
8주차 위클리 페이퍼 미션은 아래 2가지 주제를 제시해 주었다.

본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.

👨🏻‍💻 CSS-in-JS가 무엇인지 부터 살펴보자

🎯 CSS-in-JS란 무엇인가?

이름에서 유추할 수 있듯이 CSS-in-JS를 사용하면 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 리액트 컴포넌트 스타일을 지정할 수 있다.

📌 CSS-in-JS 장점

JavaScript 변수와 함수를 스타일 내에서 사용할 수 있는 기능, props에 따라 동적으로 스타일을 적용할 수 있는 기능 및 스타일을 컴포넌트로 한정하여 이름 충돌과 특정성 문제를 해결할 수 있는 기능 등 여러 가지 이점을 제공해준다.
CSS-in-JS의 가장 큰 장점 중 하나는 컴포넌트 기반 스타일링을 다룰 수 있다는 것이다.
또한 JavaScript와 유사한 구문으로 스타일을 작성하면 특히 JavaScript 문법에 익숙한 개발자의 경우 가독성과 유지 관리성이 향상될 수 있다. 이는 보다 응집력 있고 이해하기 쉬운 코드베이스로 이어질 수 있다.

📌 CSS-in-JS 단점

CSS-in-JS를 사용하려면 라이브러리를 설치해야한다. 용량이 얼마 되지 않지만설치 함으로서 번들 크기가 증가한다.

컴포넌트 내에서 요소들을 지정하여 스타일을 선언할 시 컴포넌트 내의 코드 길이가 길어질 수 있다.

CSS-in-JS는 대표적으로 styled-component Eomotion 라이브러리가 존재한다.

💡 Reference
CSS-in-JS

Presentational & Container 디자인 패턴에 대해 설명해 주세요.

🎯 React에서 UI와 기능을 분리하기 위해 등장한 패턴으로, Presentational은 UI 표현에 중점을 두며 상태를 가지지 않는 컴포넌트, Container는 데이터 관리 및 기능 구현에 중점을 두며 상태를 가진 컴포넌트로 구분한다.

📌 Presentational 컴포넌트 특징:

UI 중심 코드: UI를 표현하고 어떻게 보일지에 집중.
순수 함수: 주로 순수하며 외부에서 props를 통해 영향을 받음.
재사용성 강조: 단순하게 UI를 표현하므로 재사용성이 높음.
독립적인 동작: 다른 맥락과 독립적으로 일관된 동작을 함.
시각적 상태만 처리: UI의 상태만 다루고 로직을 포함하지 않음.

📌 Container컴포넌트 특징:

기능 중심 코드: 데이터 관리 및 기능 구현에 중점.
비순수 함수: 외부 맥락에 영향을 받아 동적으로 동작함.
다른 맥락에 영향: 외부 상태, 라이프사이클 등에 영향을 줄 수 있음.
Presentational 컴포넌트 활용: Presentational 컴포넌트에게 props를 전달하여 UI를 사용.
코드의 ‘관심사’ 분리: UI와 기능을 분리하여 유지보수성을 높임.

이러한 패턴은 React Hook 도입 이후 Container 컴포넌트의 역할이 Hook으로 대체되기도 하며, 코드의 유연성과 유지보수성을 높이는 데 기여함.

💡Reference
code-it
ChatGPT