오늘은 고래에 다녀왔다! 한주간 강의를 보면서 내가 글을 써논 것에 대한 질문 드렸던거에 대한 답을 다 해주셨다!
킹갓제네럴분(오늘부터 글에 등장하시면, 이렇게 별칭을 드릴 수 있습니당)께서 열혈 설명을 해주셨고, 난 이에 대한 정리를 하려한다!
1001 TIL-U: Styled-Components vs. Tailwind CSS
Styled-Components는 나름대로 편리하고 재사용 가능한 CSS를 컴포넌트화할 수 있다는 장점이 있지만, 최근 테일윈드 CSS를 사용해 보면서 더 직관적이고 빠른 작업이 가능하다는 걸 느꼈다. 테일윈드는 클래스 이름을 통해 스타일을 간단하게 적용할 수 있어 처음 사용했을 때는 복잡해 보였지만, 프로젝트가 커질수록 일관성 있는 디자인을 유지하는 데 큰 도움이 되는 도구였다. 특히, 테일윈드는 스타일을 위한 별도의 파일이나 컴포넌트를 만들지 않아도 되는 점에서 기존의 스타일드컴포넌트와는 다른 개념으로 접근할 수 있었다.
하지만, 난 스타일드 컴포넌트 좋아함. 고래도, 스타일드 컴포넌트니깐, 넌 내가 나중에 기회가 되면, 해줄겝
1001 TIL-U: React Concurrent Mode & Rendering Behavior
React의 Concurrent Mode를 공부하면서, 요즘 복잡한 웹사이트들이 어떻게 실시간 스트림이나 대규모 데이터를 효율적으로 렌더링하는지 알게 되었다. 한 번에 여러 개의 함수를 실행하더라도 렌더링을 최소화하는 방법으로 성능을 최적화할 수 있다. 예를 들어, 3개의 리턴값을 가진 컴포넌트에서 Suspense와 ErrorBoundary를 적용해 사용자 경험을 개선할 수 있고, 이는 사용자에게 끊김 없이 부드러운 UI를 제공하는 데 중요한 역할을 했다.
특히 실시간 스트림 데이터처럼 컴포넌트가 지속적으로 데이터를 불러와야 할 때 렌더링을 일시적으로 중단하거나 지연시키는 기술은 복잡한 애플리케이션에서 큰 강점이다. 다만, 이러한 기능들을 무분별하게 사용하면 오히려 렌더링 타이밍이 꼬일 수 있어 주의해야 한다는 점을 배웠다.!!
1001 TIL-U: Transition과 데이터 로딩
데이터가 업데이트될 때 Transition을 활용하면 사용자 경험이 훨씬 매끄럽게 이어진다. 최근 프로젝트에서는 데이터가 업데이트되는 동안 페이지가 이동하지 않고도 새로운 데이터를 반영할 수 있는 방법을 찾아 적용했는데, 그 과정에서 React의 새로운 기능들을 탐구했다. Transition을 활용해 컴포넌트 간의 상태 변화를 자연스럽게 처리하면 사용자는 데이터가 업데이트되는 동안에도 부드러운 흐름을 유지할 수 있다.
이와 관련해 React 19 버전에서 이런 문제들이 더 개선될 것으로 예상된다. 새로운 기능들이 추가될 때마다 공식 문서를 살펴보며 하나씩 익히는 것이 중요하다아...
공식문서 재밌는것 같다. 응,, 재밌지,, 졸지마. 일어나야해..
1002 TIL-U: 핸들러와 State 전달
부모 컴포넌트에서 필요한 핸들러와 state를 정의하고 이를 자식 컴포넌트에 내려주는 패턴이 훨씬 나은 설계라는 걸 실무에서 자주 느끼고 있다. 예전에는 자식 컴포넌트에서 state를 관리하거나 조작하는 코드를 넣었지만, 부모 컴포넌트에서 상태를 관리하는 방식이 데이터 흐름을 더 명확하게 해준다는 걸 이번 학습을 통해 재확인했다.
또한, 포커스 설정을 자동으로 처리하는 기능을 구현하는 도중, 창을 닫았을 때나 특정 동작이 발생할 때 포커스가 어디로 이동해야 할지를 정하는 작업이 필수적이다. 이는 사용자 경험에 매우 중요한 부분이므로 신경 써야 할 필요있다.
1002 TIL-U: Context API와 useState 비교
React의 Context API는 프로젝트에서 전역적으로 데이터를 관리하는 데 큰 도움이 되었다. 특히 useState와 비교했을 때, Context API는 객체나 배열 등의 복잡한 구조의 데이터를 쉽게 전달할 수 있고, 전역 상태를 관리할 때 유리하다.
이와 함께 Reducer 패턴을 적용하면 복잡한 상태 관리도 더 체계적으로 할 수 있다는 점을 학습했다. React 공식 문서의 Scaling Up with Reducer and Context 챕터를 참고하여 컨텍스트와 리듀서를 함께 사용하는 방법을 확인하고, 이 패턴이 전역 상태를 효율적으로 관리하는 데 도움이 된다더라.
1004 Side Effects & useEffect
Side Effect란? React에서 Side Effect는 함수형 컴포넌트의 범위를 벗어나서 다른 것에 영향을 미치는 작업들을 의미. 대표적으로 API 요청, 타이머 설정, DOM 조작 등이 있다. 이를 제대로 처리하지 않으면 의도치 않은 부작용을 발생시킬 수 있다.
useEffect의 의존성 배열 useEffect에서 가장 중요한 부분 중 하나는 의존성 배열. 의존성 배열이 없으면 매 렌더링 시마다 useEffect가 실행되며, 이는 성능에 심각한 영향을 줄 수 있다. 반대로 의존성 배열에 특정 값을 넣으면 해당 값이 변경될 때만 useEffect가 실행되므로, 불필요한 렌더링을 줄일 수 있다.
의존성 배열이 성능에 미치는 영향 의존성 배열이 성능 중요함. 만약 의존성 배열이 잘못 설정되어 무한 루프에 빠지면, 렌더링이 반복되며 성능이 크게 저하될 수 있다. 따라서 쓸데없는 값은 배열에 넣지 않는 것이 중요하다아아아아아아ㅏㅏㅏㅏㅏ.
상태 관리 패턴 상태 관리의 기본은 상태(state)와 그 상태를 업데이트하는 함수(setState)를 적절히 관리하는 것. 복잡한 상태를 관리할 때는 useEffect보다는 useReducer 같은 다른 패턴을 사용하는 것이 더 적합할 때가 많다는 것도 배우게 되었다.
///////
오늘이 5일, 아 12시 또 지났네,,, 아니 1시가 넘었다니,, 아,,, 6일...
5일에 뵙고, 19일, 응 난 할 수 있어,,
자기주도학습 ,, 그래 지금도 자기주도하다가 주말에 뵌거니깐,
2주간 잘 해놓고 있겠습니당. 약속 잘가시고, 저도 다음날 잘 놀고 2주간 열심히 하다가, 뵙는데, 아! 중간에 깃허브 관련해서, 질문을 종종 드릴 수 있지만, 최대한 방해안가게 제가 해결해보도록 하겠습니당
'
(이게 언제부터 갑자기 편지형식으로 갔냐고,,ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아 자정 넘었으니까 사람이 아니네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)
