웹찢남

리덕스란 컨텍스트보다 조금 더 체계적으로 데이터를 관리할 수 있도록 한다. 리덕스는 데이터를 스토어라는 곳에서 관리한다. 프로퍼티의 경우 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터 state는 컴포넌트의 state를 저장하고 변경할 수 있는 데이터다. 컨텍스트는 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 리덕스는 서버에서 받은 데이터를 앱 전체에 전달하거나 관리한다. 컴포넌트는 dispatch 함수를 통해 리듀서에 액션을 전달한다. 액션에는 리듀서에서 처리해야 할 작업의 이름과 데이터가 객체 형태로 들어있다. 리듀서는 액션을 받아 스토어 변경 작업을 진행한다. 스토어 변경 작업이 완료되면 connect 함수로 연결된 컴포넌트에 변경된 스토어의 데이터를 전파하여 동기..

전에 배운 프로퍼티나 state는 부모와 자식 컴포넌트가 연결된 상태에서 공유하는 데이터다. 따라서 연결되지 않은 컴포넌트들 끼리 데이터를 공유해야할때 컨텍스트를 사용한다. 프로퍼티의 경우 컴포넌트가 1->2->3->4일 경우 1에서 4로 데이터를 전달하면 모든 단계를 다 거쳐야하는데 이때 해당 프로퍼티가 모든 컴포넌트에서 사용하지 않을 수도 있고 전달과정에서 누락될 수 있다. 이를 위해 도입한 디자인 패턴이 관찰자 패턴이다. 쉽게 말해 공급자는 데이터를 공급하는 역할, 관찰자는 이를 구독하여 데이터를 소비하는 역할이다. 따라서 관찰자는 소비자라고도 한다. 위의 관찰자 패턴을 도입하면 1->공급자->소비자->4로 여러 컴포넌트들을 거치지않고 데이터를 전달 할 수 있게 된다. 이에 따라 컴포넌트간의 자료 ..

전에 배운 withstyles 함수에서 우리는 이미 커링을 사용했습니다. 커링이란 반환값이 함수인 디자인 패턴을 말하며 중복된 코드를 반복적으로 입력하지 않고 원하는 기능을 조합하여 적재적소에 사용할 수 있다. 커링이란 쉽게 말하면 함수를 반환하는 함수다. 함수의 반환은 쉽게보면 아래와 같다. function mul(a,b){ return a*b; } function mulX(x){ return function(a) { return mul(a,x); } } 위와 같은 함수가 두개 있다고 할 경우 mulX를 사용하여 아래와 같이 다양한 곱 함수를 만들 수 있다. const multhree=mulX(3); const mulfour=mulX(4); const result1=multhree(3); //3x3=9..

CSS 또는 scss 이용하여 머티리얼 디자인 적용하기 1. CDN방식으로 머티리얼 디자인 적용하기 머티리얼 디자인: 구글에서 공개한 디자인 가이드 CDN은 특정 파일을 전세계에 분산,복사하여 가장 근접한 곳에서 빠르게 내려받을 수 있도록 파일을 제공하는 방법이다. 리액트 서버에 파일을 추가하지 않고 직접 이용할 경우 이 방법을 이용한다. public내의 index.html 에 아래의 코드를 추가하면 된다. 2.App 컴포넌트에 머티리얼 디자인 적용하기 harry595의 티스토리 REACT !!! 위와 같이 코드를 삽입하면 아래와 같은 결과를 얻을 수 있다. 3. 파일 방식으로 머티리얼 디자인 적용하기 https://materializecss.com/ Documentation - Materialize m..

비주얼 테스트란 화면을 구성하는 컴포넌트들을 독립적으로 관리하고 변화를 살펴볼 수 있는 방법을 의미한다. 스토리북 설치하고 사용해 보기 1.스토리북 설치하기 yarn add --dev @storybook/react 2.package.json에 스토리북 실행 명령어 추가하기 "scripts"중괄호에 아래와 같은 line입력 "storybook": "start-storybook -p 9001 -c .storybook", -> storybook 명령어가 스토리북 서버를 9001 포트를 통해 실행 3.스토리 파일 만들기 스토리는 컴포넌트의 여러 출력 형태를 구성한 페이지다. 스토리 파일은 아래와 같이 만들 수 있다. import React, { Component } from "react"; import { st..

Component 클래스는 프로퍼티,state와 생명주기 함수가 들어있는 컴포넌트를 만들 때 사용 PureComponent 클래스는 Component 클래스를 상속받은 클래스다. PureComponent로 선언한 컴포넌트는 shouldComponentUpdate() 함수에서 shallowEqual() 함수로 얕은 비교를 하여 데이터의 변경이 있으면 화면을 새로 출력하고 Component클래스로 선언한 컴포넌트는 항상 새로 출력한다. *shallwEqual는 얕은 비교로 같은 요소를 가지면 같다고 본다. *"==="이나 "=="은 요소가 같아도 새롭게 정의된 배열이면 false로 취급한다. -----------------------------------------------------------------..