react

Programming Language/React

[React] Design Pattern in React (2) - Hooks

2025.03.07 - [Programming Language/React] - [React] Design Pattern in React (1) [React] Design Pattern in React (1)리액트에서 일반적으로 자주 쓰이는 패턴이 뭐다 이렇게 정의할 정도로 아직은 깊이가 없지만,실무에서 흔히들 많이 쓴다는 패턴을 정리해보려고 한다. 다룰 패턴들은렌더 프롭스 / 훅스 / 프juniortunar.tistory.com 이전 글에 이어,이번엔 Hooks 패턴의 자주 쓰이는 용례들을 적어보고자 한다.Hooks 패턴Hooks는 React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 패턴이다.Render Props 패턴의 많은 사용 사례를 더 ..

Programming Language/React

[React] Design Pattern in React (1) - Render Props

리액트에서 일반적으로 자주 쓰이는 패턴이 뭐다 이렇게 정의할 정도로 아직은 깊이가 없지만,실무에서 흔히들 많이 쓴다는 패턴을 정리해보려고 한다. 다룰 패턴들은렌더 프롭스 / 훅스 / 프로토타입 / 프록시 / 싱글톤 / 컴파운드로 글 하나 당 하나씩 정리해보고자 한다. 이 글은 그 첫번째 글로써 렌더 프롭스에 대해 다루고자 한다.Render Props 패턴 Render Props는 컴포넌트 간에 코드를 공유하기 위한 테크닉으로, 렌더링할 내용을 props로 전달하는 패턴이다.컴포넌트의 로직과 UI를 분리하여 재사용성을 높이고, 더 유연한 컴포넌트 설계를 가능하게 해준다.(사실 패턴이라고 지칭하는게 맞나 싶긴하다..)1. 기본 구조// 가장 기본적인 형태interface RenderProps { rende..

Programming Language/Next.js

[Next.js] Next.js의 렌더링 (SSG, SSR, ISR, PPR) in Pages Router, App Router

Next.js를 제대로 다루기 전에,Next.js의 렌더링에 대해 정리해보려고 한다. 블로그를 작성한다고 생각하고, 아래와 같은 폴더구조가 있다고 가정하고 설명해볼 것이다.├── src/│ ├── pages/ # Pages Router│ │ ├── index.tsx│ │ ├── about.tsx│ │ └── posts/│ │ ├── [id].tsx│ │ └── index.tsx│ ││ ├── app/ # App Router│ │ ├── page.tsx│ │ ├── about/│ │ │ └── page.tsx│ │ └── posts/│ │ ├── [id]/│ ..

Daily Life

[회고] 뭐했다고,, 입사 1주년..?

이 글은 입사 1주년이 된 제조업계(스마트팩토리) SI 주니어 프론트엔드 개발자의 자아성찰 및 회고를 담은 글이다. 2024년 1월 15일.부트캠프 강사님의 소개로 2023년에 약 2개월 가량 진행했던 홈페이지 리뉴얼 프로젝트의 공로를 인정받아,지금의 회사에 정규직으로 발을 떼게된 날이었다. 생각지도 않았던 제조(스마트 팩토리) 도메인이었기에 반신반의했지만,당시의 내 실력이나 상태로써는 별도로 취업준비 기간을 갖지않고 일할 수 있었기에 최선이었고,1년이 지난 지금에도 그 선택에 후회는 없는 것 같다. 회사의 메인 기술스택은 Java와 C#이지만, 다행히도(?) 지난 1년 간 맡았던 업무는 내가 공부해온 프론트엔드(React) 쪽의 업무들이었고,들어왔던 요구사항들은 무리없이 처리할 수 있는 수준이었다. 하..

개발자참치
'react' 태그의 글 목록 (2 Page)