개발(Development)/React(리액트)34 [Next.js] pages 라우팅 파일명, 컴포넌트 이름 작성 방법 Next.js 는 File System Routing 을 제공한다. 즉, pages 경로에 위치한 폴더 및 파일명 자체가 접속 경로로 라우팅된다. 1. pages/파일명.tsx : /파일명 접속 라우팅 2. pages/폴더/파일.tsx : /폴더/파일 접속 라우팅 3. pages/폴더/[쿼리].tsx : /폴더/모든경로 접속 다이나믹 라우팅. useRouter().query 로 경로 취득 * index.tsx 는 파일명을 제외한 / 경로로 인식. * 타입스트립트 확장자는 tsx, 자바스크립트 확장자는 js를 사용 그런데 라우팅되는 파일의 파일명과 컴포넌트 명은 달라도 상관없다. 이 글에서는 이에 대해 간략하게 정리한다. # pages 라우팅 파일명, 컴포넌트 이름 작성 방법 - pages 경로의 라우팅 .. 2022. 8. 21. [React] 모달창(Modal) 초간단 구현 방법(리덕스, 라이브러리 X) 이 글은 useState, useRef 등만을 활용하여 수동으로 모달창을 구현하는 방법입니다. 이 것만으로도 이미 충분히 간단하지만, 만약 HTML의 dialog 엘리먼트로 훨씬 더 쉽게 구현하는 방법이 필요하시다면, 아래 글을 참고해주세요. [React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 모달창 구현 방법 - redux나 별도 라이브러리 없이 아주 쉽게 모달창을 구현하는 방법 1. state 로 Modal 노출 여부를 관리한다. - useState 훅으로 모달창 노출 여부를 관리해준다. 2. Modal 창이 최상위에 노출되도록 CSS를 조정한다. - position: absolute로 위치를 조정한다. - z-index를 높게 줘서 최상위에 노.. 2022. 8. 16. [React] useLocation 으로 쿼리 파라미터 취득 방법(URLSearchParams 활용) # 리액트: 쿼리 파라미터 취득 방법 by useLocation GET 방식으로 http://경로?키=값 형태로 접속시, 쿼리 스트링 취득하는 방법은 아래와 같다. 1. useLocation() 으로 search 취득 - search 속성에 "?키=값&키=값" 이 저장되어 있다. - {pathname: '/query', search: '?id=10&count=2022', hash: '', state: null, key: 'default'} 2. URLSearchParams 객체 생성 - search 속성의 값을 URLSearchParams 객체로 생성한다. - new URLSearchParams(useLocation().search) 3. URLSearchParams객체.get("키") 로 쿼리 취득 -.. 2022. 8. 16. [Next.js] getServerSideProps 에서 undefined 반환 이유 # getServerSideProps 에서 undefined 가 반환되는 이유 Next.js 의 getServerSideProps은 오직 Pages 폴더에 있는 페이지 컴포넌트에서만 사용 가능하다. 즉, pages 외부 경로(src/components 등) 에 위치한 컴포넌트에서 getServerSideProps사용시, 호출 자체가 정상적으로 되지 않아 SSR이 작동하지 않는다. 따라서 아래와 같이 데이터를 받아서 사용하려 해도 애초에 받는게 없으니 undefined 로 찍힐 수 밖에 없다. type PropsType = { message: string; }; // pages 외부의 컴포넌트 function Test({ message }: PropsType) { console.log(message); /.. 2022. 8. 16. [React] JSX 특수 문자/기호 입력 방법(꺽쇠, 괄호, 슬래시 등) # 리액트에서 특수 기호 및 특수 문자 입력 방법 HTML에서 꺽쇠( ), 괄호( {, } ), 주석용 슬래쉬 ( //, /* ) 등의 특수문자 입력시, 특수문자 표를 참고하여 <, > 등으로 입력한다. 하지만 리액트 JSX에서는 중괄호를 이용해 쉽게 특수문자를 표현할 수 있다. => 중괄호 내부의 따옴표 사이에 원하는 특수기호를 입력해주면 끝! 1{''}1 괄호 {'{'} 내부 {'}'} 괄호 주석 표시 : {'//'} 주석 표시 : {'/*'} 2022. 8. 15. [Next.js] Link 라우팅 : 현재경로 active CSS 스타일링 React 에서는 네비게이션 라우팅 구현시, NavLink 를 사용하면, 해당 네비 메뉴가 선택됐을 때 자동으로 className에 active가 생겨서 선택된 네비 메뉴에만 스타일을 주기가 편했다. 하지만 Next.js 에서 Link 를 사용하면, 이 기능이 제공되지 않는다. 따라서 네비 메뉴가 선택되면, 직접 className에 active 값을 추가해줘야 한다. # Next.js에서 Link 선택 시, Active 효과 부여 방법 => 현재 경로가 선택된 메뉴와 동일할 때만 class에 active를 설정해주고 스타일링한다. 1. 컴포넌트 JS 코드 1) useRouter() 를 통해 현재 경로를 취득한다. 2) 현재 경로가 선택된 네비 메뉴와 동일할 때만 className에 active를 설정한다.. 2022. 8. 14. [React] TypeScript useRef 사용법 (+ ref 객체 타입) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값을 할당해준다. // 값 저장 용도(number) const count = useRef(0); const text = useRef("") 2. DOM 취득 용도 - 제네릭 : 참조하는 HTML 엘리먼트를 넣어준다. - 초기값: null을 넣어준다. // DOM button 참조: 제네릭으로 html엘리먼트(button) 설정. 초기값은 null로 설정 const buttonRef = useRef(null); // DOM input 참조 : 제네릭으로 html엘리먼트(in.. 2022. 8. 11. [React] useRef로 DOM 취득시, null | undefined 되는 이유와 해결방법 # useRef : DOM 취득시 null이 되는 이유 useRef로 DOM을 취득시, 사용 시점에 따라 null 이나 undefined가 될 수 있다. 예를 들어 아래 코드는 작동하지 않는다. import React, { useEffect, useRef } from 'react'; import './App.css'; function App() { // useRef 사용 const inputRef = useRef(null); // 최초 실행시 input에 focus 주기: 실패한다. inputRef.current.focus(); console.log(inputRef.current); // null 이 찍힌다. return ( {/* input 을 useRef로 참조 */} ); } export defau.. 2022. 8. 9. [React] 컴포넌트 렌더링 과정 정리(useLayoutEffect vs. useEffect) # React 컴포넌트 재렌더링 케이스 - React 컴포넌트는 아래의 2가지 상황에서 재렌더링(Re-rendering) 된다. 1. 내부 상태값(state)이나 중앙 상태값(redux store 등)이 변경되는 경우 2. 부모 컴포넌트가 재렌더링되는 경우, 자식 컴포넌트도 재렌더링. - 컴포넌트가 렌더링되면, 해당 컴포넌트 함수가 호출되어 화면을 다시 그리는데, 이 과정을 정리해둔다. # React 마운트 과정 1. 함수 컴포넌트 호출 2. 구현부 실행 - props 취득, hook 실행, 내부 변수 및 함수 생성 - 단, hook 에 등록해둔 상태값, 부수함수 효과 등은 별도 메모리에 저장되어 관리된다. 3. return 실행 - 렌더링 시작 4. 렌더 단계(Render Phase) - 가상DOM을 .. 2022. 8. 9. 이전 1 2 3 4 다음
