아직 redux를 공부하진 않았지만..;; 일단 도전! 댓글 中.. 영단어 Reduce 본래 의미를 보자면, 단순하게 줄이다라는 의미보다 변경이라는 의미에 가깝습니다. "to change something into a simpler or more general form" 그 예시로 어떤 복잡한 수학문제를 다른 비슷한 문제로 변경해서 (더 간단하게만드려고) 푸는방법을 수학에서는 reduction이라고도 합니다. "In mathematics, reduction refers to the rewriting of an expression into a simpler form." 그런의미에서 완벽히 번역은 힘들지만 reduce는 "고쳐나간다" (간단하게만들기위해서, 혹은 특정규칙을 적용하기위해서) 라고 생각해보면 좋..

Front-End Challenges | CSS-Tricks My favorite way to level up as a front-end developer is to do the work. Literally just build websites. If you can do it for money, great, you should. If css-tricks.com

[번역] React ES6 — Class constructor에서의 super() 본 글은 http://cheng.logdown.com/posts/2016/03/26/683329를 한국어로 번역한 글입니다. medium.com

변경 이유 초기 렌더링을 제어하는 방법이 많아져서 혼란이 됨. 오류 처리 인터럽트 동작시에 메모리 누수 발생할 수 있음. React 커뮤니티에서도 가장 혼란을 야기하는 라이프 사이클 React v16.3 이후에 변경된 부분 componentWillMount, componentWillReceiveProps, componentWillUpdate를 v17 부터 사용불가 componentWillReceiveProps 대체 메서드 추가 getDerivedStateFromProps componentWillUpdate 대체 메서드 추가 getSnapshotBeforeUpdate componentDidCatch 컴포넌트 에러 핸들링 API 추가 리액트 교과서 - 컴포넌트와 라이프사이클 이벤트 React 컴포넌트와 라이..

업데이트(갱신, Update) 이벤트 컴포넌트 내부의 state나 props가 변경이 되면 업데이트 이벤트가 발생하며 리렌더링 된다. 컴포넌트가 업데이트 될 때, 다음과 같은 메서드가 실행된다. new Props / setState() / forceUpdate() getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate New Props 상위 컴포넌트로부터 갱신된 props를 받는 경우가 있다. 이 때, 갱신된 props를 받은 컴포넌트들은 다시 렌더링되며, update cycle을 진행하게 된다. setState 컴포넌트들은 공통적으로 setState() api를 제공한다. 현재 자신이 ..

서론 React는 라이프사이클(생명주기, Lifecycle) 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 이러한 라이프사이클을 이용하여 우리는 React를 사용해, UI를 화면에 보이게 하고, UI를 업데이트 또는 교체하며, UI를 화면에서 제거할 수 있다. React 라이프사이클 이벤트 라이프사이클 이벤트를 분류해보면 다음과 같다. 마운트(생성, Mounte) 이벤트: React 엘리먼트를 DOM 노드에 추가할 때 발생한다. 업데이트(갱신, Update) 이벤트: 속성이나 상태가 변경되어 React 엘리먼트를 갱신할 때 발생한다. 언마운트 (제거, Unmount) 이벤트: React 엘리먼트를 DOM에서 제거할 때 생긴다. 마운트(생성, Mounte) 이벤트 컴포넌트 함수가..

1. 어떤 상황에서 함수형 컴포넌트와 클래스형 컴포넌트 둘 중 무엇을 사용하는 것이 좋을까? 2. 왜 render가 두 번 실행되는 것인가? 3. [{...}, {...}, ...] 이런 구조로 작성된 state는 props로 data라는 이름을 써야하던데, 이런 구조가 여러 개일 경우에는 어떻게 해야 하는가? 4. 컴포넌트는 얼마나 무엇을 기준으로 얼마나 쪼개야 하는가? 5. css는 각 컴포넌트 마다 파일을 따로해주어야 하는가? 1. 함수형 컴포넌트 스타일에 관해. 2. React Life Cycle 이란? 3. hook란 무엇이며 왜 생겨났는가? X. redux란 무엇이며 왜 생겨났는가?

시작하기에 앞서.. 함수형 프로그래밍을 배우면서 프로그래밍을 새로 배운다고 생각해보자. 올바른 관점을 가진다면 올바른 생각을 하게 될 것이고, 개념이 어려워도 학습을 관두지 않을 것이다. 서두르지 말고 천천히 글을 보고, 코드를 이해하며, 사고를 정리하자. 가장 중요한 건 본인이 이해해야 한다는 것이다. 순수 함수 순수 함수는 굉장히 단순한, 그저 매개변수에 따라 계산이 이루어질뿐인 함수를 말한다. 달리 말하자면, 외부 상태를 변경 시키지 않고 동일한 매개변수가 주어졌을 때, 항상 같은 값을 리턴하는 함수를 의미한다. 이해를 위해 코드를 살펴보자. 1. let z = 10; function add(x, y) { return x + y; } console.log(add(5,10)); // 15 consol..