[13일차] 리액트 HOC

HOC ? Higher-Order-Component 고차컴포넌트라 부른다. 고차컴포넌트는 컴포넌트 로직을 재사용하기위해서 사용된다. 컴포넌트를 가져와서 새컴포넌트를 반환하는 함수이다. 주의사항 render 메서드 안에서 고차 컴포넌트를 사용하면안된다. 정적 메서드는 따로 복사해야된다. ref는 전달되지않는다. 참고자료 https://velopert.com/3537 https://jeonghwan-kim.github.io/2022/05/28/react-high-order-component Controlled Component 엘리먼트를 가지고있는 컴포넌트가 관리함 대표적으로 등이있다. Uncontrolled Component 엘리먼트의 상태를 관리하지않고 , 엘리먼트의 참조만 컴포넌트가 소유 참고자료 ht..

• format_list_bulleted 프론트엔드/React
• · 2022. 11. 16.
• textsms

[12일차] React Component Styling

css,sass css, sass 를 리액트 create-app 에서의 import 하는 방식은 전역적으로 순서대로 불러오게된다. 여러가지 스타일 들이 순서대로 전역적으로 불러오게됨 이런전역적으로 적용되는 스타일들이 react처럼 기능별로 분리하는 성격과 맞지않는다 생각하게됬고 , 이를 보안하기위해 css module 이나 styled-components 등이 등장했다. css module, sass module ,styled-components className 의 중복을 막아주고 로직을 분리해서 재사용성을 높이고 유지보수에 용이하다는 장점이있다. react의 부모 컴포넌트의 css 가 자녀에 적용이되서 side effect 발생확률이 높아진다. 하지만 리액트처럼 기능분리가 확실치 않은 프로젝트에 경우..

• format_list_bulleted 프론트엔드/React
• · 2022. 11. 15.
• textsms

리액트를 다루는 기술 13장

1. 라우팅이란 ? 웹앱에서의 라우팅은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는것을 의미한다. 여기서 여러페이지로 구성된 웹페이지에서 페이지별로 컴포넌트를 분리해가며 프로젝트를 관리하기위해 필요한것이 라우팅 시스템이다. 우리는 React-Router 를 사용해서 예제를 해보자 2. 싱글 페이지 어플리케이션이란? 말그대로 한개의 페이지로 이루어진 어플리케이션 이다. 기술적으로는 한페이지만 존재하는것이지만, 사용자는 여러 페이지가 존재하는것처럼 느낀다. React-Router 는 링크를눌르면 브라우저에 History API 를 사용해 주소창 값만 변경하고 기존 페이지의 웹 어플리케이션은 유지 하면서 라우팅설정에따른 다른 페이지를 보여주는 방식이다. 3. 리액트 라우터 적용 및 사용법 3.1 프..

• format_list_bulleted 프론트엔드/React
• · 2022. 7. 28.
• textsms

리액트를 다루는 기술 13장 리액트 라우터로 SPA 개발하기 v5 -> v6 이슈

리액트를 다루는 기술 책에서 13장 라우터 부분에대해서 React-Router 버전업데이트로 인한 이슈가있다. 예제를 살펴보면 구버전에서 동작하는 코드들이기에 최신버전의 React-Router를 사용하게되면 동작하지 않을것이다. 코드가 틀린줄알고 여러번 보면서 확인했으나 결국 구버전 코드를 사용하여 동작을하지않는것이였다. 아래 링크를 통해서 공식사이트에서 버전업에대한 문서가 존재한다 근데 처음배우는사람은 공식문서를 읽고 이해하기힘들것이다. https://reactrouter.com/docs/en/v6/upgrading/v5#upgrading-from-v5 React Router | Upgrading from v5 Declarative routing for React apps at any scale rea..

• format_list_bulleted 프론트엔드/React
• · 2022. 7. 27.
• textsms