탕구리's 블로그

이번 포스팅에서는 React에서 비동기 API를 사용하는 방법에 대해서 알아보겠습니다. 상태 관리에 대해서는 앞에서 배운 Redux를 활용하여 진행하고 비동기 처리를 위해 Redux 미들웨어인 Thunk를 사용합니다. 미들웨어 없이 비동기 처리를 시도해보았으나 안 되는 것 같아서 미들웨어를 사용하게 되었습니다. 비동기 API 예제를 만들어보자! 우선, 만들고자 하는 기능은 아래 이미지와 같습니다. 동작 과정 1. 버튼에 클릭하면 API를 발생시킵니다. 2. 비동기로 동작하기 떄문에 API 요청에 대한 결과가 오기 전에는 "Loading" 문구를 화면에 랜더링 해줍니다. 3. 비동기 요청이 완료된 경우 데이터를 화면에 랜더링 해줍니다. 4. 에러가 발생한 경우에는 "error"를 화면에 랜더링 해줍니다. ..

기존에 Class형 컴포넌트에서 사용하던 상태 값 관리와 Life-cycle 메서드와 같은 기능을 React 16.8 버전에 새로 추가되어 Hook이란 기능을 통해 함수형 컴포넌트에서도 사용할 수 있게 되었습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 왜? React에서는 기존 클래스형 컴포넌트 외에 Hook이란 기능을 만들게 되었을까요 소개 영상 아래 링크는 Hook에 대한 소개 영상..

이번 포스팅에서는 조건부 랜더링과 다중 컴포넌트(?)를 랜더링 하는 방법에 대해서 알아보도록 하겠습니다. 조건부 랜더링 React에서 조건부 랜더링은 if 혹은 조건부 연산자를 통해 상태에 따른 엘리먼트를 만들어 낼 수 있습니다. 음.. 한가지 예를 들어보자면 어떤 웹 사이트에 로그인을 하려고 칩시다. 로그인을 하지 않은 경우에는 "로그인 창"이 나타나게 구현할 것이고, 로그인 상태에는 "환영합니다!"라는 문구가 출력되도록 구현하고 싶으면 어떻게 해야 할까요? 그럼 이제 위에서 예시했던 로그인 창은 아니지만 counter를 구현하고 count 숫자에 따라 1~10까지 나타내는 컴포넌트 노출시켜 주는 페이지를 만들어 보겠습니다. 우선, 프로젝트를 생성합시다. create-react-app condition..

오늘은 리액트에서 발생하는 다양한 이벤트를 어떻게 등록하고 관리하는지에 대하여 알아보는 시간을 갖도록 하겠습니다. 과연~? 리액트에서는 어떻게 이벤트를 처리할까요? 간단한 예제를 만들어보며 차근차근 확인해보도록 하겠습니다. 이벤트 등록하기 우선 간단하게 counter를 생성하고 버튼을 통해 count 값을 증가시켜주는 예제를 만들어 보겠습니다. import React, { Component } from 'react' class App extends Component { render() { return ( count BUTTON ) } } APP 컴포넌트는 카운트 값과 카운트를 증가시켜줄 버튼을 하나 가지게 됩니다. 이제 count를 관리할 수 있게 state를 선언해주고 버튼 클릭 시 이벤트를 발생시킬 ..

1.React 컴포넌트 컴포넌트? const ex = (컴포넌트); 컴포넌트는 반드시 하나의 Element만 리턴해야 합니다. (아래와 같은 코드 작성 불가) const ex = ( 1번 2번 ); 만약, 여러 개의 컴포넌트를 Return 하고 싶을 때에는 다른 태그로 한번 감싸주거나, 혹은 Fragment를 사용하도록 한다. 각각의 컴포넌트는 독립적으로 작동. const ex = ( 1번 2번 ); 함수형 컴포넌트 props만 받아서 사용이 가능하다. (state사용 불가능) life-cycle 함수가 존재하지 않습니다. 클래스형 컴포넌트에 비교하여 속도가 빠르다. ** 현재는 react-hook을 통해 함수형 컴포넌트에서 "state"를 사용, 관리가 가능하며 life-cycle과 비슷한(?) 기능 ..