우든이 블로그

2020/11/30 - [React] - [React] 12. 리덕스(Redux) 개념 정리하기 프로젝트 생성 먼저, 리덕스를 사용할 프로젝트를 만들어 줍니다. npx create-react-app redux_counter React 라이브러리 설치 만들어진 프로젝트에 redux와 react-redux 라이브러리를 설치하여 줍니다. -- save는 install 할 때, ./node_modules 안에 패키지를 설치하고 ./package.json 에 자동으로 업데이트를 해줍니다. react-redux 라이브러리에서 제공하는 useSelector와 useDispatch Hooks와 Provider 컴포넌트를 사용하기 위해 react-redux도 설치하여 줍니다. npm install redux --save..

리덕스란, 효율적으로 상태관리를 해줄 수 있는 라이브러리 리덕스는 리액트에만 종속되는 라이브러리가 아닙니다. 다른 UI 라이브러리나 프레임워크와도 함께 사용할 수 있습니다. 리덕스 개념 정리! 액션(Action) 상태의 변화가 필요할 때 발생하는 것을 액션(Action)이라고 합니다. 액션에는 type 속성을 필수로 가지고 있어야 하는데요! 이 외의 속성은 자유롭게 추가해줄 수 있습니다. 아래 코드에서는 todo라는 객체에 id와 text를 추가해주었어요! { type: "ADD_TODO", todo: { id: 0, text: "리덕스 공부 시작!" } } 액션 생성 함수(Action Creator) 액션 생성 함수는 액션(Action)을 생성해주는 함수로, 파라미터를 받아 액션 객체 형태로 만들어주는..

2020/11/16 - [React] - [React] 08. React SPA와 Router 사용하기 01 2020/11/24 - [React] - [React] 09. Router 사용하기 02 이전에 공부했던 Router를 사용하여 뉴스 뷰어를 만들어보려고 합니다. 메뉴바에서 선택된 카테고리를 url 파라미터로 전송해 해당 카테고리별로 뉴스 데이터를 보여줄 것입니다. src/components/NewsItem.js // 각 뉴스의 정보를 보여주는 컴포넌트 import React from "react"; import styled from "styled-components"; const NewsItemBlock = styled.div` display: flex; .thumbnail { margin-ri..

Context API 란, > 전역적(global)인 데이터를 공유할 수 있도록 고안된 방법입니다. > 로그인 정보 또는 웹 사이트 내에 사용자 설정 파일, 테마, 언어 등을 컴포넌트 간 공유 데이터에 사용됩니다. > redux, react-router,styled-components와 같은 라이브러리들도 Context API기반으로 구현되었습니다. > 세가지 주요 개념 createContext, Provider, Consumer가 있습니다. > Context를 사용하면 컴포넌트 재사용이 어려워짐으로 꼭 필요할 때에만 사용해야 합니다. Context API 사용하기 전에! 컴포넌트는 props를 통해 데이터를 전달합니다. 하지만 여러 컴포넌트들에게 전달할 props가 존재할 경우 이과정은 매우 번거로워지..

2020/11/16 - [React] - [React] 08. React SPA와 Router 사용하기 01 # url 파라미터 사용하기 특정 id와 같은 정보를 사용하여 데이터를 조회할 때 파라미터 값을 사용하는데요! 먼저, 다음과 같은 Profile 컴포넌트를 만들어 username을 파라미터로 받아오겠습니다. import React from "react"; const users = { song : { username : "송우든", descirption : "프론트엔드 공부중입니다." }, muk : { username : "먹깨비", descirption : "백엔드 공부중입니다." } } const Profile = ({match}) => { const { username } = match.pa..

# SPA(Single Page Application) SPA란, 한 개의 페이지로 이루어진 애플리케이션을 말합니다. 기존의 웹 페이지는 여러 페이지로 구성되어 있는데요! 사용자가 페이지를 이동할 때마다 새로운 HTML을 받아 해석한 후에 화면에 보여줍니다. 하지만 요즘 웹에서는 제공하는 정보가 많기 때문에 기존의 방식을 사용하기에는 성능상의 문제가 발생합니다. 그래서 리액트와 같은 라이브러리를 사용하여 뷰 랜더링을 담당하게 하고, 사용자와 인터랙션이 필요한 부분은 자바스크립트로 업데이트하여 해결하거나 새로운 데이터가 필요할 때에는 서버 API를 호출하여 문제를 해결합니다. SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소..

React에서 컴포넌트를 스타일링하는 방법에는 여러 가지가 있습니다. 그중에서도 가장 많이 선호되는 styled-components에 대해 공부해보겠습니다. # styled-component styled-components란, 자바스크립트 파일에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리입니다. 아래 명령어를 사용하여 프로젝트에 설치하여 줍니다. npm install --save styled-components 먼저, 파일 상단에 다음과 같이 styled-componentes에서 styled를 임포트 합니다. import styled from 'styled-components'; HTML 요소에 원하는 스타일을 적용하여 Button 변수에 저장합니다. export const ..

# Hooks Hooks는 리액트 16.8 버전에서 새로 추가된 기능으로 함수형 컴포넌트를 사용하여도 상태 관리나 여러 기능을 할 수 있게 해줍니다. 대표적으로 useState, useEffect, useReducer, UseMemo등이 있습니다. # useState useState는 함수형 컴포넌트에서도 state를 관리할 수 있게 해주는 Hooks입니다. useState는 아래와 같이 사용할 수 있습니다. import React, {useState} from 'react'; useState함수의 인자를 사용하여 상태의 초기값을 설정해줄 수 있습니다. 아래 코드에서는 count의 초기값이 0임을 의미합니다. 또한, useState함수가 호출이 되면 [상태, 상태를 갱신해주는 함수]를 반환해줍니다. 아래..

# state state란 변경될 수 있는 값을 의미합니다. 리액트에서 state에는 두가지가 있습니다. 먼저, 클래스형 컴포넌트가 가지고 있는 state에 대해 알아봅시다. 컴포넌트 생성자 메서드인 constructor()를 이용하여 state를 설정할 수 있습니다. 이때, 반드시 super(props)를 호출해 주어야 합니다. class Counter extends Component{ constructor(props) { super(props); this.state = { num : 0 }; } render(){ const {num} = this.state; return ( COUNTER {num} { this.setState({num : num + 1}); }}>증가 ); } } 또 다른 방법은 c..

# props props는 properties의 줄임말로 컴포넌트의 속성을 설정할 때 사용합니다. props를 설정하는 방법은 여러 가지가 있는데 먼저 JSX 코드 내부에서 설정하는 방법은 아래와 같습니다. 사용방법은 자바스크립트 표현식과 동일하게 {}를 사용하여 설정해줄 수 있어요! const Introduce = (props) => { return ( 안녕하세요! {props.name}의 블로그입니다. ); } 다음은 비구조할당을 이용하여 props를 설정해주는 방법입니다. const Introduce = (props) => { const {name, major} = props; return ( 안녕하세요! 이름은 {name}이고, 전공은 {major}입니다. ); } 또한, 다음과 같이 컴포넌트 속..