Programming/React ; Redux (8) 썸네일형 리스트형 Context란? Context를 사용하면 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 전달할 수 있다. 즉, 전역적으로 데이터를 공유할 수 있다. 포털의 메인 화면을 생각해보자. 아래 포털은 기본적으로 일반 모드이지만, 사용자가 취향에 따라서 다크 모드로 토글할 수 있다. 시퀀스를 따져보자면 아래와 같다. 1. 사용자가 다크 모드로 변환 버튼을 클릭한다. 2. 변환 버튼은 최상위 컴포넌트로 state를 끌어올린다. 3. 최상위 컴포넌트는 state를 변환하고, 다크모드 Style로 변경한다. setState({background: "dark"}); 4. 하위 컴포넌트는 부모 컴포넌트가 변환되었음을 감지하고 Render를 수행하며 다크모드를 적용한다. 최상위 컴포넌트부터 아주 깊은 컴포넌트까지 pro.. React로 사고하기 React로 사고하기 – React A JavaScript library for building user interfaces ko.reactjs.org JSX란? 정의 자바스크립트를 확장한 문법으로 React Element를 생성한다. React.createElement(component, props, ...children)에 대한 Sugar Syntax이다. // 컴파일 전 Click Me // 컴파일 후 React.createElement(, {color:"blue", shadowSize:2}, "Click Me"); 브라우저는 JSX를 해석할 수없으므로, Babel를 사용해서 모든 JSX를 순수 React로 변환해야 한다. 아래 글을 참고하자. 2021.05.21 - [Programming/Frontend] - Babel 정리 (Polyfill 포함) 특징 배열을 매핑하기 // map을 사용해서 여러개의 JSX 컴포넌트를 합성할 수 있다. { menus.ma.. State 특성 3가지 React에는 Props, State라는 2가지 데이터 모델이 있다. 이 글은 State의 특성에 대한 설명이다. 1. state는 수정할 수 없다. (불변성) state는 아래와 같이 접근하여 수정할 수 없다. this.state.counter = 3; (X) this.state.counter = this.state.counter+this.props.increment; (X) this.state.counter = this.state.counter++; (X) 반드시 setState로 접근하여 수정해야 한다. setState({counter:3}); (O) setState((state, props) => { state.counter + props.increment }); (O) setState((stat.. React/Redux - 실수 모음집 (누적 중) (어떤 글을 보고 영감을 받아서 누적하기로 함) https://www.educative.io/blog/top-react-mistakes Top 10 mistakes to avoid when using React React is the most popular front-end framework in the tech world, used by top companies like Facebook, Netflix, and Airbnb. Learn more about the top mistakes React developers make - and how to fix them. www.educative.io 충분한 컴포넌트를 만들지 않는다. State를 직접 수정한다. number 타입을 string타입으로 Prop.. React.memo 사용 예제 지난 주부터 미친듯이 React.memo, useMemo, useCallback에 대해서 검색했지만 모두 어디서부터인가 흘러들어온 Movie 예제에 대해서 말할 뿐, 명확한 것이 없어서 React.memo를 사용한 썰을 푼다. 물론 내가 남기는 글이 명확하고, 정확하지 않을 수도 있다. 아래는 내가 개발한 대시보드 목록 화면이다. 아래 화면은 각각의 이유로 REST API를 두 번 호출한다. 1. 초기화 후 리스트 출력을 위해 대시보드 목록 조회 --> Rerender 2번 발생 2. 추가하기 버튼을 위해 대시보드 테마 조회 --> Rerender 2번 발생 이차저차해서 전체 페이지(부모 컴포넌트)에서는 총 4번의 Rerender가 발생하고, 부모 컴포넌트의 상태값이 변했으니 자식 컴포넌트도 props가.. React Async 사용하기 - 1. useAsync, Helper components React Async는 promise resolution, data fetching을 위한 유틸리티이다. React Component와 여러 가지 Hook을 제공해주며 fetch api, Axios, GraphQL 등을 지원한다. React Async가 제공하는 3가지의 메인 API hook : useAsync component : Async factory function : createInstance 1. hok - useAsync const state = useAsync(options); state state object options Configurtion options 옵션은 되도록 inline object literal로 작성하고, state의 프로퍼티는 비구조화해서 사용하는 것을 추천한다. i.. [Reactstrap] Modal 컴포넌트 CSS 수정하기 모달에 Custom CSS 적용을 위한 props를 아래와 같이 제공한다. 필요한 속성에 맞게 사용하면 되지만, 모달 위치 및 리사이징을 위해서는 className, contentClassName을 수정해야 한다. Props className: YourCustomClass, wrapClassName: YourCustomClass, modalClassName: YourCustomClass, backdropClassName: YourCustomClass, contentClassName: YourCustomClass 작성 예시 대시보드 테마 1 2 3 4 5 대시보드 이름 (참고자료) stackoverflow.com/questions/55073427/how-to-change-the-style-of-a-reac.. 이전 1 다음
