탕구리's 블로그

지난 포스팅에 Reducer를 생성하는 부분까지 진행했었는데요. 오늘은 스토어(store)를 생성하고 열심히 생성한 Reducer와 연결시켜주는 부분에 대해서 알아보겠습니다. 이번 포스팅은 양이 많지 않으니 조금은 마음 편하게 읽어 내려가셔도 될 것 같아요! 스토어는 무슨 역할을 할까? 애플리케이션의 상태를 저장하고 getState()를 통해 상태에 접근하게 하고 dispatch(action)를 통해 상태를 수정할 수 있게 하고 subscribe(listener)를 통해 리스너를 등록합니다. 하나의 어플리케이션에선 하나의 스토어만 운영하는 것을 지향합니다. 각종 상태와 액션을 관리하는 코드가 복잡해지는 경우 리듀서를 분리(리듀서 쪼개기)하여 관리하지만 최종적으로 하나의 리듀서(리듀서 재조합)의 형태로 만..

이번 포스팅에서는 조건부 랜더링과 다중 컴포넌트(?)를 랜더링 하는 방법에 대해서 알아보도록 하겠습니다. 조건부 랜더링 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를 선언해주고 버튼 클릭 시 이벤트를 발생시킬 ..

위키 백과를 살펴보면 라우터의 사전적인 의미는 다음과 같아요. # 라우터의 사전적 의미 라우터(router[a]혹은라우팅기능을 갖는 공유기)는 패킷의 위치를 추출하여, 그 위치에 대한 최적의 경로를 지정하며, 이 경로를 따라 데이터 패킷을 다음 장치로 전향시키는 장치이다. 간단하게 해석해보면 경로를 찾아주는 역할을 합니다. 리액트(SPA)에서의 라우터는 클라이언트 사이드에서 다양한 페이지에 접근이 가능하도록 합니다. 리액트에서 가장 많이 사용하는 패키지는 "react-router-dom"이며 해당 패키지의 사용법에 대해서 알아보겠습니다. # 설치 yarn add react-router-dom npm install react-router-dom "react-router-dom"의 문서를 확인해보면 기능은 ..

시작하기 전에 해당 블로그에 작성되는 글은 주인장의 지극히 주관적인 생각이 다수이며, 대부분의 지식은 구글링을 통해 얻고 있기 때문에 옳지않은 정보가 있습니다. 잘못된 부분이나 수정해야 하는 부분이 있다면 과감히 덧글을 남겨주세요! 모르는게 많은 새싹입니다 오늘의 주제제대로 할 줄 아는건 없지만 이것저것 관심이 많기 때문에, 요즘은 친구들과 React 스터디를 진행 중 입니다.ㅎㅎㅎ 스터디에서 공부한 내용을 바탕으로"리액트 무작정 따라하기" 시리즈를 포스팅 해보려 합니다. 간단하게 리액트의 개념을 잡을 수 있는 예제와 설명을 통해 포스팅을 진행하겠습니다.오늘은 리액트 무작정 따라하기 1편 JSX 편이니 가벼운 마음으로 읽어주세요! JSX란 무엇인가?JSX란 javascript + xml을 합쳐서 만들어진..