천천히 느리게 천천히 느리게

◎ 리덕스.. 어렵다.. 처음 위코드에서 리덕스에 대해 배울 때 정말 이해가 안됬다. 프로젝트 진행할 때 리덕스 사용을 해봤지만.. 그래도 모르겠다. 그래서 다시 강의를 보면서 예제를 따라치며 내 것으로 만들기로 했다. 0. 설치 npm install redux npm install react-redux npm install redux-devtools-extension 1. 리덕스 모듈 ◎ 리액트 프로젝트에서 리덕스 모듈 만드는 방법은 다양하다. 리덕스 모듈이란 액션 타입, 액션 생성 함수, 리듀서가 들어있는 자바스크립트 파일을 의미한다. 첫 번째 방식은, 액션과 리듀서가 서로 다른 파일로 만드는 법이다. ● actions 폴더 - index.js 파일 ● reducers 폴더 - index.js 파일 ..

1. Redux 란 ◎ 리액트 생태계에서 가장 많이 사용하고 있는 상태 관리 라이브러리이다. 컴포넌트 상태 관리 로직을 다른 파일로 분리하여 더욱 효율적으로 관리할 수 있으며, 글로벌 상태 관리에도 좋다. 참고로 리덕스는 리액트에서 사용하기 위해 만들어진 라이브러리이긴 하지만, 무조건 리액트와 함께 사용할 필요는 없다. 일반 Javascript 환경이나 Angular 와 같은 다른 프레임워크에서도 사용되기도 한다. 위의 사진을 보면, 시간이 좀 된 그래프이지만, 리액트를 사용하는 프로젝트 중 45%가 리덕스를 사용하고 있다. 단순히 글로벌 상태 관리를 위한 것이라면 ContextAPI를 활용하는 것도 괜찮다. 2. Redux 와 Context API의 차이점. (리덕스 위주) 미들웨어: 리덕스에는 미들웨..

1. fetch란 ◎ fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기 쉽게 기술할 수 있다. 2. 특징 fetch( )로 부터 반환되는 HTTP Status Code가 404나 500을 반환하더라도 Promise 객체는 HTTP error 상태를 reject하지 않는다. 대신 ok 상태가 fasle인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다. 보통 fetch는 쿠키를 보내거나 받지 않는다. 사이트에서 사용자 세션을 유지 관리해야 하는 경우 인증되지 않는 요청이 발생한다. 쿠키를 전송하기 위해서는..

◎ 저번에 구현했던 위스타그램을 react 코드로 옮겨놓았다. 이제 로그인 기능을 구현할 시간인데, 로그인을 하려면 input에 id랑 passwrod를 input에 입력을 하고 그 값을 가지고 로그인 조건에 만족해야 로그인이 되도록 구현을 해야 한다. 그러면 위스타그램 코드로 input을 어떻게 관리해야 하는지 알아보자. 1. input 다루기 ◎ 우선 위스타그램 코드를 보면서 이해해보자. onChange 이벤트는 input의 텍스트 값이 바뀔 때마다 발생하는 이벤트이다. 여기에 handleInput 함수를 설정을 하였다. haandleInput의 코드는 다음과 같다. onChange 이벤트가 발생하면, e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어 올 수 있다..

1. state ◎ state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 함수형 컴포넌트와 state를 다루는데 방법에 차이가 있어서 기록을 남기자. 2. state의 사용법 ◎ 동적인 데이터를 다룰 땐 바로 state를 사용한다. 함수형 컴포넌트에서도 연습했던 카운터 예제를 통해 연습해보자. CounterClass라는 컴포넌트를 만들고 코드는 다음과 같다. 위의 코드를 한번 살펴보자. 2-1. state 정의 ◎ constructor 에서 super(props)를 호출 한 이유는 , 우리가 컴포넌트를 만들게 되면서, Component를 상속했으며, 우리가 이렇게 constructor를 작성하게 되면 기존의 클래스 생성자를 덮어쓰게 된다. 그렇기에 리액트 컴포넌트가 지니고 있던 생성자를..

1. useState ◎ 컴포넌트에서 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때 사용하는 함수가 useState이다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. useState라는 함수는 리액트의 Hoooks 중 하나이다. ※ Hook은 클래스 안에서 동작하지 않는다. 2. 예시 ◎ 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 구현해보자. 그다음엔 App에서 Counter를 렌더링 해보자. 2. 이벤트 설정 ◎ Counter에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정을 해보자. Counter 컴포넌트를 다음..

1. props ◎ props는 properties의 줄임말로, 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용해야 한다. 2. props의 사용법 ◎ 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달해주고 싶다고 해보자. 그러면, 다음과 같이 코드를 작성하면 된다. Hello 컴포넌트에서 name 값을 사용 하고 싶을 땐 어떻게 하면 되는지 코드를 작성해보자. 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할 수 있다. props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면, props.name을 조회하면 된다. 3. 여러개의 props, 비구조화 할당 ◎ Hello 컴포넌트에 또 다른 props(color)를 전달..

1. 컴포넌트 만들기 ◎ component를 만들 때는 클래스 component와 함수형 component가 있다. 예전에는 클래스 컴포넌트를 사용하였지만 리액트에서 Hooks라는 개념이 등장하고부터 함수형 컴포넌트를 많이 사용하는 추세이다. 그래서 현재 많이 사용하고 있는 함수형 컴포넌트로 만들고 나중에 클래스 컴포넌트를에 대해 알아보겠다. 자, 이제 함수형 컴포넌트로 src 디렉터리에 Hello.js라는 파일을 만들어보자. 리액트 컴포넌트를 만들 때는 import React from 'react'; 를 통하여 리액트를 불러와 주어야 한다. 그리고 코드의 최하단에는 export defualt Hello; 를 통하여 Hello라는 컴포넌트를 내보겠다는 의미로 코드를 작성하여야 한다. 이렇게 해주면 다른 ..