✨ 리액트 페이지 라우팅이란? ✨페이지 라우팅이란 경로에 따라 알맞은 페이지를 렌더링하는 과정이다.예를 들어 /new 경로로 이동하면 New 페이지가 렌더링되는 방식이다. 🏡➡️📄🔍 페이지 라우팅의 원리웹 서버는 사용자에게 제공해야 하는 HTML 파일을 가지고 있다. 브라우저에서 /blog 같은 특정 페이지를 요청하면 서버는 해당 페이지를 그대로 반환하여 렌더링하게 된다.이 방식은 MPA (Multi-Page Application) 라고 하며, 전통적인 방식으로 많은 서비스에서 사용되어 왔다. 🏛️📜🏗️ 멀티 사이드 렌더링(MPA)와 서버 사이드 렌더링(SSR)멀티 사이드 렌더링 (MPA, Multi-Page Application)서버가 여러 개의 개별적인 페이지를 보유하고 있음각 페이지 이동..
Frontend/React
useEffect를 사용해 마운트/ 언마운트/ 업데이트 시 할 작업 설정하기useEffect라는 Hook을 사용해 컴포넌트가 마운트 됐을 때(처음 나타났을 때), 언마운트 됐을 때(사라질 때), 그리고 업데이트 될 때(특정 props 가 바뀔 때) 특정 작업을 처리하는 방법에 대해 알아보려 한다. 마운트 / 언마운트우선. 마운트 / 언마운트 관리를 하려 한다. UserList.jsfunction User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); 이렇게 해주면 콘솔에서 삭제나 ..
배열에 항목 수정하기 User 컴포넌트에 계정명을 클릭했을 때 색상이 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현하기 users 배열 안의 객체 안에 active라는 속성을 추가해준다. App.js const [users, setUsers] = useState([ { id : 1, username : 'silver', email: 'public.les0498@gmail.com' , active: true }, { id : 2, username : 'tester', email: 'tester@example.com', active: false }, { ..
배열 항목 제거하기 UserList.js import React from 'react';function User({ user, onRemove }) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 );}function UserList({ users, onRemove }) { return ( {users.map(user => ( ))} );}export default UserList; App.jsimport React, { useRef, useState } from "react";import UserList from "./UserList";import C..
useRef로 컴포넌트 안의 변수 만들기 & 배열에 항목 추가하기 컴포넌트에서 특정 DOM을 선택해야할 때 -> ref 사용함수형 컴포넌트에서 이를 설정할 때 -> useRef 사용 useRef Hook은 DOM을 선택하는 용도 외에도, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리함. App 컴포넌트에서 userRef를 사용해 변수를 관리하려 한다. 사용하려는 목적은 배열에 새 항목을 추가하려 할 때, 새 항목에서 사용 할 고유 id를 관리하는 용도이다. useRef를 사용하여 변수를 관리하기 전에 배열을 App에서 선언하고 UserList에게 props로 전달해주는 방식으로 만들 것이다. 1. useRef로 컴포넌트 안의 변수 만들기App.jsimport React, { use..
배열 렌더링하기 ● 배열const users = [ { id : 1, username : 'silver', email: 'public.les0498@gmail.com' }, { id : 2, username : 'tester', email: 'public.tester@example.com' }, { id : 3, username : 'gold', email: 'public.gold@example.com' }, ]; 이 내용을 컴포넌트로 렌더링한다면 아래와 같은 코드로 나타낼 수 있다. ● UserList.jsimport React from 'react';function UserLis..
useRef로 특정 DOM 선택하기 특정 DOM 을 선택해야하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해 DOM을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야하는 상황이 발생하는데, 예를 들어 특정 엘리먼트의 크기를 가져온다던지, 스크롤바 위치를 가져오거나 설정해야한다던지, 포커스를 설정해줘야하는 상황들..., 외부 라이브러리 등을 사용해야 할 때에도 특정 DOM에 적용하기 때문에 DOM을 선택해야하는 상황이 발생한다. 이럴땐 리액트에서 ref 를 사용해준다. 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 HOOK함수를 사용한다. 다음 코드는 초기화 버튼을 클릭했을 때 이름input에 포커..
여러 개의 input 상태 관리하기 input이 여러 개일때는 어떻게 관리하는지 알아보자. InputSample.jsimport React, {useState} from 'react';function InputSample() { const onChange = (e) => { }; const onReset = () => { }; return ( 초기화 값: 이름 (닉네임) );}export default InputSample; 이제 이름과 닉네임에 값을 넣어 출력해준다. (new!!) InputSample.js import React, {useState} from 'react';fun..
Input 상태 관리하기 사용자가 입력 할 수 있는 input태그의 상태를 관리하는 방법을 알아보려 한다. 우선, src 디렉토리에 InputSample.js 라는 파일을 생성한다. InputSample.jsimport React from 'react';function InputSample() { return ( 초기화 값: );}export default InputSample; 그 다음 이 컴포넌트를 App에서 렌더링 해준다. App.jsimport React from "react";import InputSample from "./InputSample";function App() { return ( );}expo..
useState를 통해 컴포넌트에서 바뀌는 값 관리하기 Counter.jsimport React from 'react'; function Counter() { return ( 0 +1 -1 );}export default Counter; App.js import React from "react";import Counter from "./Counter";function App() { return ( );}export default App; 실행 화면 이제 , Counter에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정을 한다. 이벤트 설정onIncrease 와 onDecrease 화살표 함수를 사용하여 구현한..
