React7 ReactNode와 ReactElement의 차이 props로 컴포넌트(children)를 넘기거나 하는 상황에서 엘리먼트의 타입을 지정해주는데, 이때 ReactNode와 ReactElement의 차이가 헷갈려 찾아보게 되었다. 이런 경우에는 어떤 타입이 맞을까? export interface IEditorLayoutProps extends WithTranslation { children: React.ReactElement; } export interface IEditorLayoutProps extends WithTranslation { children: React.ReactNode; } 결론부터 말하자면 둘다 맞다. 왜냐하면 ReactNode가 ReactElement의 슈퍼셋이기 때문이다. 아래와 같은 관계이다. 리액트에 정의된 타입을 봐도 확인할 .. 2024. 2. 20. React에서 복잡한 상태를 관리하기 위해서 MVC패턴을 적용해보자 - Why편 들어가며 회사에서 업무를 하며 프로젝트에 MVC패턴을 적용했다. 프론트엔드에서는 흔하게 사용되는 구조가 아니기도 하며, 또 나와 같은 어려운 상황에 겪을 누군가를 위해 조금이라도 도움이 되고자 글을 작성한다. 글의 순서는 다음과 같다. 나는 어쩌다가 프론트에서 MVC 패턴을 적용하게 되었을까? MVC 패턴이란 무엇인가? 프론트에서 MVC 패턴을 사용해본 후기 나는 어쩌다가 프론트에서 MVC 패턴을 적용하게 되었을까? 현재 회사에서 AI 휴먼 영상생성 에디터를 개발하고 있다. 에디터 자체도 개발하기에 복잡한 편이지만, 자동으로 AI 음성/ 영상생성해서 캔버스나 타임라인에 적용해줘야하기 때문에 복잡함이 배가 된다. (이 글에서 타임라인은 대부분의 영상편기 하단부에 있는 그 타임라인이다. 아래 우측 사진 참고.. 2024. 1. 25. Recoil under the hood🤿 리코일을 직접 만들어보기 최근 1년 넘는 시간동안 회사에서 리코일을 사용했다. 다양한 환경에서 사용하다보니 자연스럽게 리코일에 대해 공부하게 되었고 이를 바탕으로 글을 작성해보려고 한다. 📌 오늘 해보고자 하는 것 ✅ Context로 구현하기 vs 리코일 사용하기 ✅ 리코일은 어떻게 필요한 부분만 리렌더하는가? ✅ 리코일을 직접 만들어보자! 📌 대상 독자 이 글은 기본적으로 Recoil을 사용해본 사람이 읽으면 좋을 것같다. 리코일이 처음이라면 이 글을 먼저 읽고 한번 사용해보기를 추천한다. 리코일은 리액트 hook을 사용할 수 있고 Context API에 대한 이해도가 어느정도 있다면 정말 쉽게 사용해볼 수 있다. ✅ Context로 구현하기 vs 리코일 사용하기 상태관리를 하다보면 해당 상태가 너무 많은 컴포넌트에서 사용하고.. 2023. 11. 24. 리코일(Recoil) 기초 Recoil이란? Recoil is a state management library for React (리코일은 리액트를 위한 상태 관리 라이브러리다.) 목표 1. Flexible shared state React에서 공유된 상태(shared state)를 사용하기 위해 Context Provider를 사용한다. 그러나 Provider가 점점 많아지면 층층이 쌓이면 사이에 걸쳐있는 불필요한 컴포넌트들까지 리렌더링이 발생한다. Recoil은 이를 해결하기 위해서 React state와는 수직적인 방향으로 상태를 관리한다. (수직적이라는 것은 위 그림에서 보듯이 React 상태 트리가 바닥면이고 Recoil의 상태는 위에서 아래로 수직으로 내려오는 모양을 말하는 것이다. 따라서 React 상태의 영향을 받지.. 2021. 5. 19. React this.state의 this의 의미 React에서 코드를 작성하다가 한번쯤 마주하게 되는 에러가 있다. 📌문제가 발생한 상황 컴포넌트들의 구조는 아래 그림과 같이 생겼다. App 컴포넌트는 fruitList와 searchFruit이라는 두개의 state를 가지고 있고, Search 컴포넌트에서 검색 내용의 input(검색내용)을 받으면 App 컴포넌트의 searchFruit만 변경해주면 되는 상황이다. - App 컴포넌트의 onSearchChange() 함수 onSearchChange(event) { this.setState({ fruitSearch: event.target.value }); } - Search 컴포넌트에서 onSearchChage를 호출하는 부분 const Search = ({ onSearchChange }) => { r.. 2020. 4. 6. Redux 세 가지 원칙 1. Single source of truth The state of your whole application is stored in an object tree within a single store. 어플리케이션 내의 state는 단일한 store안에 있는 객체 트리에 저장된다. - 서버에서 가져온 state를 클라이언트쪽에 나열하거나 흡수시킬때 별다른 추가적인 코딩 없이 쉽게 쓸 수있다. - 디버깅이 쉬워진다. - 개발 사이클이 더 빨라진다. (undo/redo 등의 조금 어려웠던 작업들이 간단하게 해결가능해진다.) console.log(store.getState()) /* Prints { visibilityFilter: 'SHOW_ALL', todos: [ { text: 'Consider using.. 2020. 2. 18. 리액트 공부한 내용 정리 React 공식 문서(주요 개념) 보면서 내가 기록해두고 싶은 것들만 정리한 내용 JSX 소개 JSX는 Javascript를 확장한 문법이다. 생긴 것은 꼭 html과 JavaScript어느 중간 사이로 보이지만 따지자면 JavaScript에 조금 더 가깝다. (그렇기 때문에 JavaScript와 같이 camelCase를 사용한다.) JSX는 표현식이다. 때문에 if문이나 for loop등을 사용할 수 있다. 컴파일이 끝나면 JSX 표현식은 정규 JavaScript 함수가 되고, JavaScript 객체로 인식된다. 아래와 같이 if문을 사용하는 것이 가능하다! function getGreeting(user) { if (user) { return Hello, {formatName(user)}!; } re.. 2020. 1. 31. 이전 1 다음
