Programming/React.js (5) 썸네일형 리스트형 React 개발자로서 알아야 할 SOLID 원칙 프론트엔드 개발을 하다 보면 컴포넌트가 점점 커지고, 재사용도 어려워지고, 유지보수는 지옥이 되어가는 경험... 한 번쯤 해보셨죠?이럴 때 도움이 되는 게 바로 SOLID 원칙입니다.SOLID는 객체 지향 설계 원칙이지만, 함수형과 컴포넌트 기반 개발에도 충분히 적용할 수 있어요.오늘은 React 코드 예시를 통해 SOLID를 쉽게 풀어보겠습니다!✅ 1. SRP - 단일 책임 원칙 (Single Responsibility Principle)한 컴포넌트는 하나의 일만 해야 한다.❌ 잘못된 예시const UserProfile = ({ user }) => { const [editing, setEditing] = useState(false); const saveUser = async (userData) =>.. Next.js 15 업데이트 및 변경점 Next.js 15의 정식 버전이 드디어 출시되었습니다. 이번 업데이트는 많은 개발자들에게 기대를 모으고 있으며, 다양한 새로운 기능과 개선 사항이 포함되어 있습니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링과 정적 웹사이트 생성을 지원하여 많은 인기를 끌고 있습니다. 이번 포스트에서는 Next.js 15의 주요 업데이트 내용을 자세히 살펴보겠습니다.주요 업데이트 내용주요 업데이트 사항React 19 통합Next.js 15는 React 19와 통합되어 서버 액션과 같은 새로운 기능을 지원합니다. 이는 상태 관리와 UI 업데이트를 개선하며, React 18과의 호환성도 유지합니다. 다만, React 18과 React 19를 혼합하여 사용하는 것은 추천되지 않습니다Partial .. React.js 19 정식 버전 출시, 업데이트 내용 React 19는 최근에 발표된 리액트의 최신 버전으로, 많은 개발자들이 기대하고 있는 업데이트입니다. 이번 버전은 여러 가지 새로운 기능과 성능 개선 사항을 포함하고 있어, 개발자들에게 더 나은 개발 환경을 제공할 것으로 보입니다. 이번 포스트에서는 React 19의 주요 업데이트 사항과 그 의미에 대해 자세히 살펴보겠습니다.React는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다. React 19는 이러한 React의 발전을 이어가는 중요한 버전으로, 많은 기능이 추가되었습니다. 특히, 이번 업데이트는 개발자들이 더 효율적으로 작업할 수 있도록 돕는 다양한 도구와 기능을 제공합니다.이미지 출처주요 업데이트 사항서버 컴포넌트(Server Components).. Next.js Static Rendering(정적 렌더링)과 Dynamic Rendering(동적 렌더링) Next.js 13 이상에서는 App Router를 도입하며 정적 렌더링(Static Rendering)과 동적 렌더링(Dynamic Rendering)을 보다 유연하고 선언적으로 사용할 수 있게 되었습니다. 아래는 App Router에서 각각의 렌더링 방식을 구현하는 예시입니다.1. Static Rendering (정적 렌더링)정적 렌더링은 빌드 시점에 페이지를 생성하여 클라이언트 요청 시 미리 준비된 HTML을 제공하는 방식입니다. App Router에서 정적 렌더링은 기본 설정이며, 데이터를 가져오지 않거나 fetch를 사용하여 빌드 타임에 데이터를 가져옵니다.구현 예시async function fetchPost(id) { const res = await fetch(`https://api.exam.. React Hook Memoization(메모이제이션) useCallback/useMemo React에서는 컴포넌트의 state 또는 부모에게서 받은 props 값이 변경될 때 마다 리렌더링합니다. 그리고 리렌더링될 때마다 컴포넌트의 변수와 함수들이 매번 재생성됩니다. 때문에 반복적이고 쓸데없는 리렌더링은 성능에 영향을 줍니다. 예시로 부모에게서 props로 {a, b}를 넘겨받았다면 props.a만 변경되어도 props.b관련 함수,변수도 다시 호출하여 실행합니다. 이런 불필요한 동작을 피하고자 메모이제이션을 적용한 useCallback 와 useMemo함수를 사용합니다. useCallback uesCallback은 메모이제이션된 콜백을 반환합니다. useCallback(fn, deps)와 같이 사용합니다. fn: 메모이제이션할 콜백 함수 deps: 콜백의 의존성 배열, 콜백의 의존성 배열이.. 이전 1 다음
