함께 성장하는 프로독학러

안녕하세요, 프로독학러 입니다. 이번에 진행할 튜토리얼은 'Memo 어플리케이션 만들기' 입니다. 1. intro 본 튜토리얼은 Velopert 님의 'React.js Codelab 2016' 을 기반으로 작성될 예정입니다.여러 모듈들의 버전업에 따라 작성방법이 조금씩 달라진 코드를 버전에 맞게 수정하고, 제가 튜토리얼을 따라함에 있어 이해가 쉽지 않았던 부분에 설명을 추가하는 방식으로 진행할 예정입니다.* Velopert 님의 원본 튜토리얼을 보고싶으신 분들은 아래의 링크를 참고해 주세요. 2. require Memo 어플리케이션은 여러가지 언어들을 이용하여 만드는 하나의 서비스입니다. 아래의 리스트 중 모르는 언어나 부족한 부분이 있다면 해당 언어를 숙지하신 후 튜토리얼을 따라오시는 것도 좋습니다. ..

안녕하세요, 프로독학러 입니다. 이 카테고리에서는 리액트 라우터(version_4 이상)에 대해서 배워보도록 하겠습니다. 포스팅의 내용은 Velopert 님의 리액트 라우터 강의를 복습한 내용이므로 Velopert 님의 원본 강의를 듣고싶으신 분들은 아래의 링크를 참조해 주세요. https://velopert.com/3411 1) 리액트 라우터의 효용 리액트 라우터는 SPA(Single Page Application)를 리액트를 통해 구현하는데 필요한 라이브러리입니다. SPA 와 반대되는 개념은 전통적인 웹 어플리케이션 입니다.전통적인 웹 어플리케이션은 여러 페이지로 구성되어 있으며, 한 페이지에서 다른 페이지로 이동할 때 페이지 전체를 다시 렌더링 합니다.이런 방식의 전통적인 웹 어플리케이션의 렌더링은..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 리덕스를 사용하는 이유와 리덕스의 개념을 정리해 보겠습니다. * 이번 포스팅의 내용은 velopert 님의 '리덕스 왜 쓸까?' 포스팅을 정리한 내용입니다. 리덕스를 이해하기 위해서 먼저 리덕스를 사용하지 않는 환경의 단점을 먼저 파악해 보겠습니다. 간단한 예를 통해 살펴보겠습니다. 만약 다음 그림과 같이 세 개의 컴포넌트가 있다고 합시다.A 컴포넌트는 B 와 C 컴포넌트의 부모 컴포넌트입니다. B 컴포넌트는 A 의 상태를 변경하는 함수를 실행하는 컴포넌트입니다. (A의 상태를 변경하는 메소드 _increase 를 increNum 프롭스로 전달받습니다.) C 컴포넌트는 A 컴포넌트의 상태(state)를 렌더링하는 컴포넌트입니다.(A의 상태를 numValu..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 props 에 이어 컴포넌트에서 데이터를 처리하는 개념중 하나인 state 에 대해서 알아보도록 하겠습니다. 저번 포스팅에서 props 를 '정적인 데이터'라고 했습니다.그 이유는 props 를 전달받아 사용하는 하위 컴포넌트에서 이 props 를 수정할 수 없기 때문이죠. 반면 state 는 컴포넌트 안에 존재하며, 수정할 수 있는 데이터입니다.그리고 state 가 수정되면 컴포넌트는 다시 렌더링 됩니다. (다음 포스팅이 될 예정인 Component Lifecycle 에서 더 자세히 살펴보겠습니다. 지금 단계에서는 스테이트가 수정되면 다시 렌더링 된다는 점만 기억해주세요) 먼저 state 의 선언부터 알아보겠습니다. 코드와 함께 살펴보도록 하겠습니다.프..