React는 하나의 언어다.
2024. 11. 22.
React는 하나의 언어다.
심윤섭: React에서는 여러가지 규칙(암묵적인 규칙을 포함해서)을 갖고 있고, 이는 바닐라 JS와는 다른 방식으로 코드를 만들기를 유도합니다. 글쓴이는 라이브러리/프레임워크를 가장 잘 쓰는 방법은 메인테이너가 하고자 한 것, 생각한 것을 따라가 보는 것이라고 주장하고, 저도 그렇게 생각합니다. 더 나아가서 라이브러리/프레임워크를 사용하기 전에 적어도 핵심 concept나 원칙, 해결하고자 한 문제, 크게는 문서 전체를 봐야 라이브러리/프레임워크를 사용한 의미가 생긴다고 생각합니다. JS와 JS 생태계는 적은 제약으로 다양한 방식으로 코드를 만들 수 있게 하지만, 규칙이나 제약을 따르지 않으면 어쩌면 AI보다 생산성이 낮아질 수도 있다고도 떠오르게 되네요.
김대관: 라이브러리나 프레임워크는 특정 기술적 문제를 해결하기 위해 만들어졌습니다. 따라서 이를 선택할 때는 자신이 해결하려는 문제와 해당 도구가 해결하려는 문제가 일치하는지 확인하는 것이 중요합니다. React 역시 문제 해결을 위한 패턴과 기능에 기반한 규칙들이 있으며, 이를 따르는 방식이 하나의 언어처럼 느껴지기도 합니다. 제약보다는 규칙이라는 이름으로 움직이는 하나의 언어라는 것에 저도 동의합니다.
하나의 함수에 하나의 동작.
심윤섭: (글에는 적혀있지 않지만) SOLID 원칙의 단일 책임 원칙(SRP)를 React와 JS 기반으로 간단하게 설명한 글입니다. 하나의 동작을 정의하는 것을 자주 생각해보면 도움이 됩니다. 경우에 따라서 글에 적힌 이점이 드러날 때도 있지만, 경우에 따라 Atomic Design같이 너무 많이 쪼개져서 디버깅하기 어려울 수도 있습니다(Atomic Design이 나쁜 추상화는 아니지만, 관리하는 사람이 충분하지 않다면 좋은 추상화라고 보기 어렵다고 생각합니다).
제어 컴포넌트와 비제어 컴포넌트, 그리고 관점
심윤섭: React 공식문서에도 적혀있듯이, useState를 사용하면 제어 컴포넌트, useRef를 사용하면 비제어 컴포넌트라고 소개하지 않고, 상황에 따라 제어 혹은 비제어 방식으로 상태 관리를 한다고 적혀있습니다(다소 의역). React-Hook-Forms와 같이 두 방식을 혼합해서 사용할 수도 있고, 외부 컴포넌트 라이브러리를 사용해서 글에서 제시하는 혼합된 상태를 컨트롤할 수도 있습니다. 간단한 글이지만, 제어/비제어를 어떻게 다루어야 하는지 잘 보여줍니다.
가운데 정렬했다고 정말 가운데인가요?
예전 글인 가운데 정렬은 힘들다에서 말했듯이 진짜 가운데 정렬을 찾기는 어렵습니다. 이를 가운데 정렬하기에 관련된 새로운 기능인 block에서 align-content사용이나 fit-content, text-box-*를 소개합니다.
면접 단골질문: 브라우저에 URL을 입력하면 어떤 일이 일어나나요?
예전에 가져왔던 HTTP + DNS 설명 글과 비슷하지만, 브라우저 렌더링을 간략하게 추가한 글입니다. 브라우저 렌더링에 더 깊게 이해하면 좋지만, 대략적으로 살펴보기에 좋네요. 자세히 살펴보실 분은 web.dev의 최신 브라우저 렌더링 개요나 Chrome blog의 RenderingNG 아키텍쳐 개요를 추천드립니다.
outline을 예쁘게 만들기
경우에 따라 디자이너가 outline: none;를 적용해달라고 제안할 경우도 있는데, 접근성과 사용자 경험에 나쁜 영향을 끼칩니다. 그래서 outline을 이쁘게 만드는 팁을 제공하는 글입니다. 글에서는 outline을 잘 사용하는 방법을 소개했지만, 여러가지 CSS 문법들은 다른 곳에도 적용할 수 있으니 익혀보는 것도 나쁘지 않습니다.