본문 바로가기

분류 전체보기68

React Portal https://ko.legacy.reactjs.org/docs/portals.html Portals – React A JavaScript library for building user interfaces ko.legacy.reactjs.org React Portal 은 부모 컴포넌트의 DOM 계층 바깥에서 DOM 노드를 렌더링하는 방법이다. 위와 같이 메인 app 의 영역 바깥에 modal 을 표현할 수 있는 를 생성할 때 쓰이는데, 이는 부모의 z-index 값이 작은 경우(예를 들어 1), 자식 컴포넌트의 z-index 가 커도 화면 상단으로 표시되지 않을 때 app-root 바깥에 modal-root 를 둠으로써 해결할 수 있다. React.createPortal 로 만들어진 요소는 app-root.. 2023. 10. 6.
Next Module Alias @ https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases#module-aliases Configuring: Absolute Imports and Module Path Aliases | Next.js Using App Router Features available in /app nextjs.org 절대경로와 상대경로는 다 알지만 Next 에서 Base URL 의 경우 "@/assets" 와 같이 @로 표시해서 사용할 수 있다. 2023. 9. 22.
React snippets Visual Studio 에서 Extension 으로 React snippets 를 다운로드 받으면 함수형 컴포넌트를 만들 때, rafce 단축키로 리액트 기본 코드를 구현할 수 있다. https://github.com/ults-io/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md#rafce 그 외에도 많은데 차차 알아가야지 2023. 9. 20.
react-redux 기초 Redux 는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 라고 하는데 React-redux 를 간단히 사용하며 느낀 정의는, Redux 는 상태(State)를 Store 에 저장하여 전역적으로 관리할 수 있도록 도와주는 상태관리 라이브러리이다. Velopert 블로그 포스트를 간단한 토이프로젝트 후 발견하게 되었는데 https://velopert.com/3528 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) | VELOPERT.LOG 이 포스트는 리덕스의 리도 모르는 독자들을 대상으로 작성된 글입니다. 리덕스가 왜 필요한지 알아보고, 리덕스를 편리하게 사용하기 위한 발악을 한번 해보겠습니다. 리덕스 왜 쓸까? 리액트 velopert.com Root 컴포넌트 아래.. 2023. 8. 4.