SUE 개발 블로그

useReducer는 현재 상태와 액션 개체를 매개변수로 받아와 새로운 상태를 반환해주는 함수이다. 리듀서로 상태를 관리하려면 구성 요소의 최상위에서 호출해야한다. ( 공식 문서 내용 ) import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... 매개변수 reducer: 상태가 업데이트되는 방식을 지정하는 감속기 함수입니다.순수해야 하고 상태와 작업을 인수로 가져와야 하며 다음 상태를 반환해야 합니다. 상태 및 작업은 모든 유형이 될 수 있습니다. initial..

리액트는 기본적으로 단방향으로만 데이터가 흐른다. ( 단방향 데이터 흐름 ) 상위 컴포넌트에서 가지고 있는 데이터를 하위 컴포넌트로 props 객체를 통해 전달하는 것을 props drilling. 함수를 통해 하위 컴포넌트 데이터를 상위 컴포넌트로 전달받아 사용할 수 있는데 이것을 상태 끌어올리기 state lifting 라고 한다. 리액트에서 만든 컴포넌트들은 위처럼 데이터는 위에서 아래로만 흐르는 단방향 흐름이고 추가, 수정, 삭제 같은 이벤트들을 핸들링 하는 setState 같은 함수를 props로 전달해 아래에서 위로 올리는 구조라고 볼 수 있다. 여러개의 컴포넌트에 엮인 데이터들을 그들의 공통 부모인 컴포넌트에 state 로 설정하여 문제를 해결. 일기를 작성하는 프로그램을 예제로 확인해보자...

어떤 프로그램이 실행 되고 종료되는 과정을 나타내기 위해서 Life cycle 이란 단어를 사용하게 된다. 간단하게 탄생 - 변화 - 죽음으로 나타내서 보자. ( Component Mount - Update - UnMount ) 리액트에서 제작하고 사용하는 컴포넌트의 탄생에서 state 나 props 가 바뀌게 되어 일어나는 Update 거쳐 컴포넌트가 화면에서 사라지는 죽음까지의 과정이다. 이런 컴포넌트의 생애 주기인 Lifecycle 을 제어한다는 것은 어떤 의미가 있을까? 컴포넌트의 Lifecycle 을 제어한다는 것은 엄청 어렵고 고난이도의 기술을 이야기 하는 것이 아닌 위와 같이 컴포넌트가 탄생하고 변화하고 사라져 죽는 순간에 각각 어떤 작업을 수행 시킬 수 있는 것을 Lifecycle을 제어한..

State : 상태 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 의미한다. state는 화면에 보여줄 컴포넌트의 UI 정보(상태)이다. state는 컴포넌트 내에서 정의해 사용하며 언제든 데이터가 변경될 수 있다. 우선 형태를 살펴보자. import React, { useState } from 'react'; function State() { const [color, setColor] = useState('red'); return ( Function Component | State ); } export default State; 함수 컴포넌트 화면에서 나타내고 싶은 JSX 요소가 return문 안에 들어있다. state를 설정할 땐 화면에 보이듯이 useState 함수를 import..

Key React 공식문서에 정의된 내용이다. key는 리액트가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다. 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. map을 사용시 key값을 부여하는 가장 큰 이유는 고유성을 부여하는 것으로 사실 key값을 부여하지 않아도 에러는 발생하지 않지만 경고가 뜨게 된다. 예를 들어 map함수로 각 각 1,2,3 이라는 가로줄 div를 만들고 새로 4라는 새로운 객체를 추가해서 보여준다면 리액트는 다시 처음부터 1,2,3,4 이렇게 재렌더링을 한 후에 보여주지만 key값으로 고유성을 부여하게 되면 바로 4만 새로 추가해 렌더링하여 보여주기 때문이다. 즉 key는 각 배열 인자에 고유성을 심어 변화가 생기는 부분만 찾아 항..

수업과 학습을 통해서 state 는 값을 저장하는 구나~ Props는 전달받는 거구나~ 하며 정확히 이해하지 않고 당장 사용하는 것에 중점을 뒀던 것 같다. 항상 기초를 닦아야하는게 중요하다고. 블로깅할 겸 정리해보려한다. props(properties)와 state는 일반 자바스크립트 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지며 props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리한다. React에서 this.props와 this.state는 모두 렌더링된 값을 나타냄 = 현재 화면에 보이는 것을 뜻한다. React State (상태) import React, { useState } from "react"; // state는 위처럼 import 해줘야한다. ( ..

SPA (Single Page Application) 은 페이지가 한 개 인 어플리케이션을 말한다. 즉 main.html , login.html 처럼 페이지 수 만큼 html 파일이 존재하는게 아니라 리액트 프로젝트에서는 html 갯수가 1개로 한개의 웹페이지에서 여러개의 페이지를 보여주는 것이다. 이 때 한 개의 페이지에서 여러 페이지를 보여주는 방법이 바로 Routing이다. 라우팅 (Routing)은 다른 경로 (url 주소)에 따라 다른 화면 (View)를 보여주는 것이다. 하지만 리액트 자체에 내장된 기능이 아니다. React-router는 리액트의 라우터 기능을 위해 사용되는 라이브러리이다. npm install react-router-dom 위와 같은 명령어를 터미널에 입력해서 설치해준다. ..

const hi = ; const myFavorite = { food: 샐러드, animal: dog, hobby: programming}; 이제 학습을 진행하기 위해 App.js 에서 코딩을 하는데 뭔가 이상하다. App( )이란 JS 함수문법 안의 return( )안에 쌩으로 평소에 웹을 만들듯이 HTML을 작성하고 있다. 지금 작성하고 있는 문법이 JSX 문법인 것이다. 위처럼 에 클래스명을 주고 싶으면 라고 적어야한다. 일종의 자바스크립트이기 때문에! JSX(JavaScript XML) Javascript에 XML을 추가한 확장 문법 1. JSX는 한 파일에서 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다. 2. 자바스크립트에서 HTML을 작성하듯 코딩해 가독성이 좋고 작성하는 과정이 ..

1. 컴포넌트화 방식 페이지마다 공통적으로 사용되는 Header, Nav, Footer 같은 요소들을 별도의 파일이나 모듈로 제작한 후에 MyHeader 컴포넌트, MyNav 컴포넌트, MyFooter 컴포넌트라 불러 각각 필요한 페이지마다 컴포넌트 이름으로 불러다 쓰는 방식으로 코딩할 수 있기 때문이다. 페이지를 추가적으로 만들어야할 때 타이핑 해야 할 코드가 줄어든다. ( 컴포넌트를 불러오기 때문 ) 공통적으로 다른 페이지에도 사용될 요소들을 컴포넌트를 이용해 재사용하는 방식을 컴포넌트화 방식이라고 한다. 만약 같은 Header 을 사용하는 페이지가 2개 존재한다면 기존의 방식은 Header 라는 요소를 전부 찾아서 수정해야 하나 컴포넌트화 방식으로 만들어졌다면 Header 라는 컴포넌트 파일만 수정..