아는만큼 보인다.

최근 SRP와 DI를 비롯한 객체 지향 원칙들을 프로젝트에 적용하며 리팩토링을 진행하고 있었습니다.그런데 컴포넌트를 기능별로 나누다보니 원래 한 컴포넌트에서 모든 기능이 모두 모여있던 것과 달리 props drilling 현상이 발생했습니다.3, 4개 정도까지는 괜찮다고 생각하는 편입니다. Props drilling그래도 리팩토링 내내 맘에 걸렸고 useQuery를 통해 가져오는 Server State라 기능 별로 나눈 컴포넌트 모두에서useQuery를 사용할 수는 없으니 그보다 높은 부모 컴포넌트에서 props를 내려주는 props drilling 방식을 선택하였습니다.export default function MemberSelect({ maxCapacity }: { maxCapacity: number..

리액트에는 라이프 사이클이라는 개념이 존재합니다.저도 그렇고 많은 분들이 React의 개념인줄만 알고 있어서 정정하겠습니다.직역하면 생명 주기를 뜻하는데 컴포넌트 기반의 뷰(View)를 중심으로 하는 라이브러리나 프레임워크에서 사용되는 개념입니다! 리액트의 컴포넌트도 생명 주기라는 것을 가지며 이 생명 주기는 컴포넌트가 생성되고 수정되고 사라질 때까지의 과정입니다.말그대로 컴포넌트의 생명 주기입니다.컴포넌트가 생성, 수정, 삭제 될 때마다 호출되는 메서드를 라이프 사이클 이벤트라고 합니다. 라이프 사이클이 왜 있느냐할 수 있지만 컴포넌트의 생명 주기를 다루는 것은 매우 중요합니다.특정 컴포넌트의 동작을 제어할 수 있고 이로 인해 컴포넌트가 불필요한 렌더링을 하는 것을 방지할 수 있습니다.만약 외부 데이터..

안녕하세요! 이번 글에서는 정말 유용하고 널리 쓰이는 react-hook-form에 대해 알아보려 합니다.react-hook-form은 react에서 form 관련 코드를 줄이고 다양한 기능을 제공하는 라이브러리인데요.특히 여러개의 입력이 필요할 때 유용하게 쓰입니다! ❓ react-hook-form?이름에서부터 알 수 있듯이 React 기반의 form 라이브러리입니다. 이 라이브러리는..

안녕하세요..ㅎ 티스토리 뉴비이자 프론트엔드 개발자 이운린이라고 합니다! 먼저 첫 글로는 무엇을 쓸까 고민을 많이 했는데 프론트엔드 개발자인만큼 프론트엔드 3대 프레임워크(라이브러리) 중 하나이자 가장 널리 쓰이는 React에 관한 글을 써보고 싶었습니다! 많이 미숙한 부분이 있을 수 있지만 글 쓰기 초보자의 성장기라고 생각해주세요! ❓React란 뭘까? React의 공식문서 페이지를 들어가보면 React를 위 문장으로 정의합니다. (React의 개발사는 페이스북입니다!) 사실 처음 시작할 때는 React가 무엇인지도 모르고 "어 다른 프론트엔드 개발자들은 전부 React를 사용하네?" 같이 수동적으로 React를 시작하는 프론트엔드 개발자 분들이 대부분이라고 생각합니다. 저 역시도 학교에 재학하면서 학..