React9 Container-Presenter container와 presenter는 리액트의 코드 디자인 패턴이다. 2015년에 개발자 Dan Abramov가 처음 소개했으며, 현재는 리액트의 고전 디자인 패턴이라 해도 무방하다. 싱글페이지, 구조관련과 기능을 한페이지에서 작성할 수 있는 jsx가 반영된 게 리액트의 장점임을 우리는 알고 있다. 다만, 프로젝트가 커지다보면 한 파일 내에 모든 코드가 다 있다보니 편해서 사용했지만, 어느순간 불편함을 초래한다. 이를 해결하고자 나온게 코드 디자인 패턴들이다. Container-Presenter는 그 패턴 중 하나다. 구조 Container-Presenter 디자인 구조는 기본 개념은 간단하다. 기능 부분과 보여주는 부분을 단순하게 분리하는 것. 페이지 함수에서 여러 기능이 포함되고 리턴에서 화면을 그.. 2022. 9. 21. static routing & dynamic routing routing 명사로 여정, 전달, 발송절차를 뜻한다. static routing과 dynaminc routing을 직역하면 정적 전달, 동적 전달이다. static routing은 전달 방법와 주소가 정확히 정해져 있고, dynaminc routing은 전달 방법와 주소가 때마다 달라질 수 있는 방식이다. 여기서는 네트워크보다는 프론트엔드, 그리고 리액트를 확장팩격인 nextjs를 사용할 때 사용 방식을 위주로 정리한다. static routing static routing은 매우 간단하다. 우리가 만든 폴더가 주소다. http://도메인.닷컴/0boards/new와 같이 되어 있다면 실제 리액트에서는 아래 사진과 같은 폴더 구조를 가진다. 따라서 개발자가 폴더 이름이나 폴더 구조를 바꾸지 않는 이상 .. 2022. 9. 19. React state, prev & props, children 별도 상태관리 라이브러리를 사용하지 않는다면 리액트에서 함수 다음으로 많이 사용하는 게 바로 state인 듯하다. 모달을 열고 닫을 때나, 어떤 값을 저장하고 뺄 때나, 특정 변화를 자식 컴포넌트에서 작동 시키고 싶을 때 등 state가 항상 쓰인다. state는 값을 저장하는 변수와 저장 값을 업데이트할 수 있는 함수가 한쌍으로 이뤄져있다. 한 단어로 말한다면 상태관리기능이다. 리액트에서는 이를 hook이라 부른다. (hook은 특정 기능을 수행하는 함수 또는 기능 모음을 가리키는 리액트 용어다.) state는 말로 설명하기보다 코드로 보는 게 이해가 빠르므로 코드부터 보자. useState import { useState } from "react"; export default function Coun.. 2022. 9. 17. Conditional-rendering 리액트 작업 시 서버에서 값을 받아올 때 typeError, null 등으로 오류날 때가 있다. 보내는 값도, 코드도 백엔드도 정상이다. 이때 점검해봐야 할 게 하나 있다. 바로 Conditional-rendering이다. 우리는 서버에서 받아온 값을 변수에 넣어 사용한다. 변수는 선언되었지만, 서버에서 값이 넘어오지 않았다면 어떨까. 아무것도 없는 값이다. 아무것도 없는 데 화면에 띄운다면 당연히 에러날 수밖에 없다. 서버에서 응답(원하는 값)이 넘어왔을 때 화면에 다시 화면에 그리도록 하는 조건이 필요하다. 다시 그리도록 조건문을 세우는 게 Conditional-rendering이다. 사용 방법 Conditional-rendering에는 AND연산자(&&), 삼항연산자, 옵셔널체이닝(Optional .. 2022. 9. 12. 이전 1 2 다음
