메모장 메모장

7장은 리덕스 입니다. ✔ 리덕스 란?

4장은 실습과정이어서 생략하고 5장부터 이어서 포스트 하려합니다. 5장은 하이어오더 컴포넌트입니다. ✔ 커링 쉽게 이야기 하면 함수의 재활용을 위해 사용하며 함수를 반환하는 함수입니다. 아래 소스를 보시면 일반 방식은 인자를 한번에 전달받고, 커링으로 구성한 함수를 인자를 나우어 받을 수 있습니다. 이때의 커링의 장점은 multiplyX(2)를 먼저 실행하고 필요에 따라 추가적인 연산 진행이 가능하다는 점입니다. function multiply(a, b) { return a * b; } function multiplyX(x) { return function(a) { return multiply(x, a); } } const result1 = multiply(2, 3) // 6 const result2 =..

유투브에서 리액트 그리고 리덕스 관련 자료를 찾다가 저자분께서 강연하신 내용을 보고 구입하게 된 도서입니다. 내용이 유익하여 공부하면서 한번 정리해보겠습니다~ 1장은 리액트 개발환경 구축이라 생략하고 2장부터 시작하겠습니다. ES6 문법 액기스 ✔ 템플릿 문자열 - 백틱(`)으로 문자열 표현하며 $를 사용하여 변수 또는 식 포함 ✔ 전개 연산자 - 나열형 자료를 추출하거나 연결할 때 사용 배열, 객체, 변수명 앞에 마침표 3개로 표현 (괄호 안에서만 사용 가능) var arr1 = ['1','2']; var arr2 = ['3','4']; const combined = [...arr1, ...arr2]; // ['1','2','3','4'] const [first, second, three='empty'..

이번 포스트에서는 6장 React의 Context에 대해서 알아보겠습니다. ✔ 관찰자 패턴이란? Context를 이야기하기 전에 관찰자 패턴에 대해서 먼저 이야기하겠습니다. 리액트는 기본적으로 데이터가 아래로 흐르는 단방향성의 특징이 있습니다. (Prop Drilling 패턴) Drilling 패턴으로 전송된 데이터는 모든 컴포넌트에서 사용되지 않을 수도 있고 누락될 수도 있습니다. 이를 해결하기 위해 데이터를 공급자가 관리하고 해당 데이터를 원하는 컴포넌트(소비자)가 직접 공급자를 구독하여 데이터를 얻는 관찰자 패턴을 활용합니다. ✔ Context이란? React에서는 Context를 활용하여 관찰자 패턴을 제공합니다. ✔ Context의 규칙 소비자는 공급자보다 낮은 계층에 있어야 한다. 소비자는 공..

리액트 컴포넌트의 생명부터 소멸까지의 과정을 컴포넌트 생명주기라고 한다. 각 생명주기 시점마다의 함수를 제공하고 있어, 해당 함수를 활용하면 특정 시점에 원하는 동작을 만들 수 있습니다. constructor(props) 함수 컴포넌트를 처음 만들때 호출합니다. super()는 프로퍼티와 생명주기 상태 등을 초기화과정 포함합니다. constructor(props) { super(props); // 항상 super() 함수를 맨 위에 호출 // 추가적인 state 데이터 혹은 변수 선언 } render() 함수 컴포넌트 랜더링이 필요할떄 호출되는 함수입니다. getDerivedStateFromProps 함수 정적함수로, 함수 안에서 prop, state에 접근할 수 없습니다. 이 함수는 상위 컴포넌트에서 ..