버튼을 만들고 클릭하면 클릭 횟수를 세어주는 간단한 기능을 두 가지 방법을 사용해서 만들어보자 기존 VanillaJS 사용 Total clicks: 0 Click me ReactJS로 element를 생성하여 사용 리액트JS를 좀 더 본질적으로 이해하기 위해서 현업에서는 사용하지 않는 어려운 방식을 우선 사용해보자. 리액트JS를 사용하기 위해서는 react와 react-dom을 import한 뒤 실행시켜야 한다. react는 js의 라이브러리이고 react-dom은 모든 react element를 HTML body에 둘 수 있도록 해주는 패키지다. 우리는 react로 element를 생성하고 생성한 element를 react-dom을 통해 렌더링시킬 수 있다. 바닐라js는 HTML을 먼저 만들고 JS로 ..
Tech/ReactJS
그래프 데이터베이스는 JSON과 같은 형태기 때문에 데이터 베이스 시스템을 갖고 있지 않는 자바 스크립트에서 쉽게 사용할 수 있다. 그래프 DB구조 만들기 - 검색에 대한 속도 최적화를 위해 해시맵 구조를 도입한다 - 해시맵은 데이터의 순서를 따지지 않기 때문에 그래프에 저장되는 데이터 순서를 따로 배열로 저장한다. //SET_COLLECTION 액션 임포트 import { SET_COLLECTION } from '../actions/collectionActions01'; //빈 그래프 DB 구성 const initState = { ids: [], entities: {}, }; export default (state = initState, action) => { const { type, payload }..
액션 { type: .... , payload: ... } 구조의 객체이다. type - 액션이 어떤 작업인지 쉽게 이해할 수 있는 고유한 값을 구분한 문자열 payload - 스토어에 사용할 값으로 스토어의 데이터를 초기화하는 경우에는 생략 가능 { type: 'SET_LOADING', payload: true, } 리듀서 //기본 함수 구조 function reducer(state, action) { return state;} //사용 예시 , 이전 데이터(state)를 받아 새로운 데이터(sate.payload)로 변경 const reducer = (state, action) => state + action.payload; 스토어의 이전 데이터, 액션을 받아 새로운 스토어의 데이터를 반환한다. 반환..
리덕스란? 리덕스는 데이터를 관리하는 기술이다. 리덕스는 데이터를 스토어(store)라는 곳에서 관리한다. 스토어를 통해 데이터가 전파되고 컴포넌트는 스토어에 데이터 변경을 요청한다. 리덕스와 컨텍스트 차이 리덕스는 컨텍스트와 비슷하다. 단, 여러 개의 공급자를 관리하던 컨텍스트와 달리 리덕스는 스토어에서 모든 데이터를 관리한다. 컨텍스트 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 리덕스 서버에서 받은 데이터를 앱 전체에 전달하거나 관리 '서버에서 가져온 데이터를 이용하여 새로운 결과물을 만드는 경우 -> 리덕스 '컴포넌트의 통합 데이터를 관리하는 경우' -> 컨텍스트 리덕스 동작 리덕스의 동작을 이해하기 위해서는 스토어의 데이터의 변화과정의 이해가 필요하다. 아래의 그림은 스토어의..
컨텍스트 API를 활용하면 기존 공급자와 소비자를 컴포넌트로 구현하여 컨텍스트를 구성하는 과정을 대체할 수 있다. createContext() 함수 : 공급자와 소비자를 반환하는 컨텍스트를 생성하는 함수 const MyContext = React.createContext(defaultValue); 공급자는 MyContext.Provider , 소비자는 MyContext.Consumer로 접근해서 사용하거나 const{ Provider, Consumer } = React.createContext(defaultValue);와 같이 분할 할당하여 사용한다. 컨텍스트 API 사용해보기 (로딩상태를 표시하는 공급자 컴포넌트 예시) 1. createContext()함수로 공급자 만들기 import React fro..
중복 공급자란? 하나의 소비자가 두 개 이상의 공급자 데이터를 구독하는 것이다. 이때 , 전달하는 데이터의 이름이 같다면 소비 자는 더 가까운 공급자의 데이터를 수신한다. 예) 두개의 상태(state1, state2)를 필요로 하는 소비자는 다음과 같이 배치된다. //state1을 위한 공급자 //state2를 위한 공급자 이와 같은 경우 state라는 키 이름이 중복되기 때문에 소비자는 가까운 state2에만 접근하게 된다. 중복 공급자 문제 해결법 : 커링함수 사용 키 이름을 인자로 받아 원하는 하나의 소비자가 동시에 두 개의 컨텍스트 데이터에 접근할 때
컨텍스트란? 컴포넌트는 프로퍼티와 state 그리고 컨텍스트로 이루어져 있다. 프로퍼티와 state는 부모와 자식 컴포넌트가 연결된 상태에서 공유하는 데이터인 반면, 컨텍스트는 부모와 자식 컴포넌트가 연결되어 있지 않아도 데이터를 공유한다. '데이터 공유 저장소' 와 '데이터 전파'의 역할을 한다고 알아두면 좋을 것 같다. 관찰자 패턴 데이터를 갖고 있는 프로퍼티를 원하는 컴포넌트에 바로 전달하기 위해서는 관찰자 패턴이라는 개념의 이해가 필요하다 관찰자 패턴은 데이터는 공급자가 관리하고 관찰자는 공급자를 구독하여 데이터를 얻는 방식이다. 이러한 관찰자 패턴을 사용하게 되면 공급자와 소비자(관찰자)가 역할을 분리하여 데이터를 관리하게 된다. 예를 들어 최상위 컴포넌트를 1컴포넌트라 하고, 최하위 컴포넌트를..
하이어오더 컴포넌트를 겹쳐서 계속하여 컴포넌트의 기능을 확장한다. recompose라이브러리의 compose()함수 사용
recompose라이브러리 이 라이브러리는 하이어오더 컴포넌트 중 자주 사용하는 패턴을 모은 하이어오더 컴포넌트 라이브러리이다. recompose는 반복해서 입력해야하는 불필요한 코드의 양을 줄여야 하는 경우에만 적절히 최소한으로 사용하도록 한다. 라이브러리를 설치하기 위해 명령 프롬프트에 다음의 명령어를 입력한다. $ yarn add recompose 라이브러리를 import할 때는 필요한 함수만 추출하여 임포트한다. ex) import branch from 'recompose/branch'; recompose라이브러리의 함수 종류 branch()함수 조건식에 따라 다른 하이어오더 컴포넌트를 출력해야 하는 경우 사용한다. branch( condition: props => boolean, left: Hi..
하이어오더 컴포넌트를 보기 전에 하이어오더에 쓰이는 데코레이터 패턴에 대해 먼저 알아보자 데코레이터 패턴을 이해하기 위해선 상속패턴을 알아야 한다. 상속 패턴 : 공통 기능은 부모로부터 물려받고, 추가 기능만 구현하여 중복 코드의 양을 줄일 수 있는 패턴 상속패턴은 여러 부모의 속성을 동시에 가질 경우 상속 구조가 변경되어 원치 않는 상속을 받게 되는 등의 문제가 발생한다. 이를 해결해 기존의 구조를 해치지 않으면서 원하는 기능만 상속받기 위해 제안된 디자인 패턴이 '데코레이터 패턴'이다. 데코레이터 패턴이란? 클래스 간의 종속성 없이 기능만을 공유하는 디자인 패턴이다. 하이어오더 컴포넌트란? 기존 컴포넌트에 기능을 덧붙여 새 컴포넌트로 반환하는 함수를 말하는 것으로, 커링함수를 고차함수라고 하는 자바스..
커링이란? 반환값이 함수인 디자인 패턴으로 중복된 코드를 반복적으로 입력하지 않고 원하는 기능을 조합하여 알맞게 사용할 수 있다. 사용 예시) const equation = (a, b, c) => x => ((x * a) * b) + c; const formula = equation(2, 3, 4); const x = 2; const result = formula(x); equation함수는 a,b,c 값을 인자로 받아 ((x * a) * b) + c 라는 함수를 반환한다. 이와 같이 인자를 나중에 받아 실행할 함수를 생성해주는 equation() 함수와 같은 함수를 커링함수라고 한다. 함수조합기법 함수의 적용 순서와 작성 순서의 흐름이 달라서 코드의 가독성이 떨어지고 작성 시에 실수를 할 수 있다. c..
JSX (JavaScript XML) 자바스크립트에 XML을 추가한 확장형 문법이다. 하나의 파일에 자바스크립트와 HTML 동시에 작성이 가능하다. 리액트 엔진은 JSX의 XML구조를 분석하여 자바스크립트 함수코드로 변환한다. *리액트 앱 구동시켜 웹 브라우저에서 확인 가능 (오류도 웹에서 바로 확인 가능) 컴포넌트 기존의 웹 프레임 워크는 MVC방식으로 정보 (Model), 화면(View) , 구동(Controller) 코드를 분리하여 관리하였으나 MVC 각 요소의 의존성이 높은 탓에 재활용이 어려웠다. 컴포넌트가 등장하여 MVC의 뷰를 독립적으로 구성하고 재활용할 수 있게 되었다. 이는 각 요소가 비슷하고 반복적으로 사용하는 경우가 많은 웹사이트에 더 적합한 방식이다. 컴포넌트는 프로퍼티 / stat..
리액트 프런트엔드 프레임워크 중 하나로 화면 출력에 특화된 프레임워크 컴포넌트로 화면 구성을 효율적으로 할 수 있음 작고 독립적인 코드블록인 컴포넌트를 조합하여 원하는 화면 구성 게임 엔진 원리를 도입하여 화면 출력 속도가 빠름 다음 장면에 필요한 화면을 미리 그려두어 변경된 화면의 일부만 수정 리액트 개발환경 설치 노드 버전 매니저로 노드제이에스 설치 yarn과 create-react-app 설치 비주얼 스튜디오 코드와 플러그인 설치 리액트 ES6 문법 템플릿 문자열(template string) : 문자열 안에 변수와 연산식을 혼합하여 사용 - 백틱으로 문자열 표현 - $를 사용하여 변수 또는 식 포함 - Enter를 사용하여 줄을 바꾸는 것도 허용 var string 1 = '안녕하세요'; var ..
