컨텍스트란? 컴포넌트는 프로퍼티와 state 그리고 컨텍스트로 이루어져 있다. 프로퍼티와 state는 부모와 자식 컴포넌트가 연결된 상태에서 공유하는 데이터인 반면, 컨텍스트는 부모와 자식 컴포넌트가 연결되어 있지 않아도 데이터를 공유한다. '데이터 공유 저장소' 와 '데이터 전파'의 역할을 한다고 알아두면 좋을 것 같다. 관찰자 패턴 데이터를 갖고 있는 프로퍼티를 원하는 컴포넌트에 바로 전달하기 위해서는 관찰자 패턴이라는 개념의 이해가 필요하다 관찰자 패턴은 데이터는 공급자가 관리하고 관찰자는 공급자를 구독하여 데이터를 얻는 방식이다. 이러한 관찰자 패턴을 사용하게 되면 공급자와 소비자(관찰자)가 역할을 분리하여 데이터를 관리하게 된다. 예를 들어 최상위 컴포넌트를 1컴포넌트라 하고, 최하위 컴포넌트를..
Tech
하이어오더 컴포넌트를 겹쳐서 계속하여 컴포넌트의 기능을 확장한다. 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 ..
