FE/React19 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. JSX? Javascript XML React 혹은 next.js를 시작한다면 처음 마주하는 언어(?)다. 자바스크립트 같으면서 순간 "뭐지"하는 그것이다. JSX 문법을 잠깐 살펴보자. export default function first() { return ( 하이 클릭하세요. ); } 자바스크립트 함수를 선언 같아 보인다. 자세히 보면 반환 값으로 HTML이 들어있다. 쉽게 말하면 JSX란 Javascript에 XML문법을 더해 HTML까지 한 번에 작성하는 자바스크립트 확장 문법이다. 물론, 리턴문 안에 HTML 태그처럼 작성하지만 실제 HTML 태그는 아니며 JSX용 HTML이라고 이해하는 게 좋다. 리턴문은 실제 작동에선 babel을 이용해 자바스크립트 형태로 바꾸어 실행한다. export defaul.. 2022. 8. 30. 이전 1 2 3 4 다음
