말은 쉽지, 코드를 보여줘!

컴포넌트 리렌더링이라 함은 함수형 컴포넌트 기준 JSX문법으로 작성된 view를 리턴하는 함수가 다시 수행되는 거라고 생각하면 된다. 그렇다면 컴포넌트 업데이트는 뭘까? 결국 같은 말 아닌가? 업데이트가 결국 리렌더링으로 연결되기 때문에 그냥 비슷한 의미로 해석하고 있었으나 가끔 이를 혼용해서 쓰는 글들이 보이기 시작하니 좀 헷갈려서 정리해놓는다. ​ 일단 업데이트가 더 큰 의미로 말그대로 컴포넌트가 업데이트되는 것을 말하고 그 과정에 리렌더링이 발생한다. 즉, 순서상 업데이트->리렌더링 이 된다. ​ 컴포넌트가 업데이트 되는 상황은 아래와 같다. ​ 1. props 가 변경되었을 때 2. state 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 6...

intellij 를 통해 react 프로젝트를 생성하면 index.js -> 컴포넌트에 자동으로 감싸고 있다. 이는 감싼 컴포넌트 내의 잠재적인 문제를 알아내기 위한 도구로 해당 컴포넌트와 자손들에 대한 부가적인 검사와 경고를 활성화한다. 꼭 index.js에 쓰지 않아도 되고 부분적으로도 사용할 수 있다. 제거해도 상관없지만 개발모드에만 영향을 끼치니 굳이 사용하지 않을 이유는 없다.

""로 묶는 문자값이 아닌 경우(예: true, false, 0, 1) 반드시 {}로 감싸줘야 한다. 정리중..

특정 js 파일의 클래스나 함수를 다른 곳에서 import 받아서 사용하려면 기본적으로 가장 하단에 export 처리가 되어 있어야 한다. export는 아래와 같이 하면 된다. export default counter; export const increase = () => ({type: INCREASE); ./counter.js 파일을 import 받는다고 가정하면 아래와 같이 하면 된다. 보면 알겠지만 export default 로 내보낸 것들은 그냥 명시하면 되지만 export 로 내보낸 것들은 {}로 묶어줘야 한다. import counter, { increase } from './counter'; 만약 import 받으려는 파일명이 index.js 이고 modules 디렉토리 하위에 있다면 아래..

기존방식 //함수선언식 function func(arg) { ... } //함수표현식 const func = function(arg) { ... } ES6 화살표 함수 const func = (arg) => { ... } 기존의 함수표현식과 비슷한 형태로 사용되지만 this의 기준이 다르기 때문에 화살표함수가 완전히 기존 방식을 대체할 순 없다. 기존 함수에서의 this는 자신이 종속된 객체를 가리키고 화살표함수의 this는 자신이 종속된 인스턴스를 가리킨다. 클래스, 객체, 인스턴스 대한 구분은 아래를 참고하자. findmypiece.tistory.com/35 클래스, 객체, 인스턴스 객체는 뭐고 객체는 뭐고 인스턴스는 뭔가? 그리고 클래스는 또 뭘까? 흔히들 클래스를 객체화한다거나 클래스를 인스턴스화..

배열과 객체 리터럴 값을 복사해온다. const numbers = [1, 2, 3, 4, 5]; const moreNumbers = [...numbers, 6]; //배열을 그대로 복사해오는 것으로 아래와 같다. const numbers = [1, 2, 3, 4, 5]; var numbersLength = numbers.length; const moreNumbers = new Array(); for(var i = 0; i < numbersLength+1; i++){ if(i < numbersLength){ moreNumbers[i] = numbers[i]; }else{ moreNumbers[i] = 6; } } 위와 같이 하면 numbers의 값이 moreNumbers에 그대로 복사된다. 기본적으로 전개..

redux-saga 에서는 ES6의 제너레이터 함수 문법을 사용한다. 사실 이 문법에 대해 딱히 몰라도 redux-saga를 사용법만 알면 큰 문제가 되지 않지만 원리를 알면 아주 조금은 도움이 된다. ​ 제너레이터 함수는 문자그대로 발전기를 만들어주는 것으로 해당 함수를 최초 호출할 경우 함수 내부 구문이 실행되는 것이 아니라 내부 구문을 실행시킬 수 있는 제너레이터 객체를 리턴하게 된다. 이 문법의 핵심기능은 함수를 실행할 때 함수를 특정구간에 멈춰 놓았다가 다음 호출에 이어서 실행시킬 수 있다는 것이다. ​ 제너레이터 함수는 아래와 같이 정의한다. function* generatorFunc(){ console.log('1 구간 진입'); let param = yield; console.log('1구..