react

웹 애플리케이션의 사용자 경험은 상태 전환의 자연스러움에 크게 좌우된다. 사용자가 리스트에서 항목을 선택해 상세로 들어가거나, 카드가 화면에서 커다란 히어로 이미지로 확장되는 장면이 부드럽게 이어지면 인터페이스는 훨씬 더 신뢰감을 준다. 과거에는 이런 효과를 만들려면 복잡한 DOM 측정·계산·동기화 로직을 직접 구현해야 했지만, View Transitions API는 브라우저 수준에서 '상태 변경을 알려주면 알아서 전환을 처리'하는 패러다임을 제시한다.전통적인 전환은 개발자가 이전 상태와 이후 상태를 둘 다 직접 다루고, 애니메이션 타이밍을 맞추며, 엔터/엑시트 애니메이션을 수동으로 제어해야 했다. View Transitions API는 이 과정을 단순화한다. 개발자는 "이제 상태를 바꾼다"는 사실만 브..

리액트를 배우다 보면 자연스럽게 훅(Hook)에 대해 접하게 된다. useState, useEffect 같은 기본적인 훅을 사용하며 컴포넌트의 상태를 관리하고, 생명주기를 다루는 방법을 익히게 된다. 동시에 리액트에서는 훅을 사용할 때 반드시 지켜야 할 몇 가지 규칙이 있으며, 이를 어기면 예기치 않은 오류가 발생할 수 있다는 이야기를 듣게 된다. 리액트 공식 문서에서도 이를 강조하고 있다. 훅은 최상위에서만 호출해야 하며 조건문이나 반복문 안에서는 사용할 수 없다. 반드시 리액트 함수 내에서만 호출해야 하며 클래스 컴포넌트에서는 호출할 수 없다.도전적인 개발자라면 주어진 규칙에 무조건적으로 순응하지 않는다. 대신, 그 규칙이 반드시 지켜야 할 절대적인 원칙인지, 아니면 단순한 관례인지 직접 검증해본다...

예전에 멘토님께서 이런 이야기를 해주신 적이 있다. "각 라이브러리가 어떻게 라우팅을 구현하고 있는지를 외우고 있는 건 하나도 중요하지 않다. 정말 중요한 건 이들 라이브러리가 해결하고자 하는 어떤 공통된 문제가 존재한다는 것이며, 따라서 라우팅을 지원하는 라이브러리가 해결하고자 하는 문제가 무엇인지를 알아야 한다. 이걸 알고 나면 각각의 라이브러리가 이 문제를 어떻게 해결하는 지는 그냥 공식 문서 찾아보면 된다." 이 말은 비단 라우팅 뿐 아니라 '라이브러리' 전체에 동일하게 적용할 수 있는 격언이라 생각한다. NextJS는 페이지 라우터와 앱 라우터를 지원하고, React 수준에서는 오래전부터 React-Router를 사용해 CSR 라우팅을 처리해왔다. 이들은 모두 라우팅 문제 해결이라는 공통된 목적..

앞서 작성한 input 연대기 초반에 잠깐 언급했었는데, 내가 프론트엔드 공부를 처음 시작했을때부터 지금까지 꾸준히 고민하고 있는 문제 중 하나가 'Button과 Link가 같은 스타일을 가질 때 어떻게 처리할 것인가'이다. 이 두 개의 컴포넌트는 받는 props의 타입도 조금 다르고, 클릭했을 때의 동작도 다른 편이지만, 결국은 '클릭할 수 있는 영역'이기 때문에 UI 적으로 비슷하거나 동일한 디자인을 가져가는 경우가 종종 있다. 처음에는 하나의 스타일시트를 만들고, Button과 Link 컴포넌트에 className으로 동일한 css를 넘겨줄 생각이었다. 그러나 이 방법은 곧 한계를 드러냈다. 내가 간과한 사실 중 하나는 '스타일은 결국 여러 옵션의 내용(size, color etc)을 중첩하여 사용..

내가 프론트엔드 공부를 처음 시작했을때부터 지금까지 꾸준히 고민하고 있는 문제가 둘 있다. 하나는 다음 포스트에서 풀어볼 'Button과 Link가 같은 스타일을 가질 때 어떻게 처리할 것인가'이고, 다른 하나는 input의 type을 text와 password로 바꿔주는 기능을 어떻게 처리할 것인지에 대한 것이다. 회원가입/로그인 폼을 생각해보면 거기에는 늘 비밀번호 입력을 감출 수 있는 눈동자 버튼이 있다. 이 눈동자 버튼을 누르면 input의 type이 password에서 text로 바뀌고, 다시 누르면 그 반대로 바뀌게 된다. 리액트를 배우고 한 시간 정도면 아마 누구라도 구현할 수 있을 지 모른다.그런데 이 눈동자가 토글된 상태는 어느 컴포넌트에 위치시키고, 눈동자 버튼은 어디에 배치해야 하며,..

리액트를 처음 배우던 시절 나는 비동기 데이터를 다루는 방식의 하나로 useAsync라는 이름의 커스텀 훅을 접하게 되었다. 이는 컴포넌트 내부에서 비동기 작업을 안전하게 처리하기 위한 수단이었는데, 그 코드를 기억나는대로 작성해보자면 아래와 같았다.export const useAsync = (fn) => { const [state, setState] = useState({ data: null, loading: true, error: null }); useEffect(() => { const fetchData = async () => { try { setState((prev) => ({ ...prev, loading: true })); ..