썸네일 [React] replace로 간단하게 뒤로가기 막기 Next.js - useRouter 생성import { useRouter } from "next/navigation";const router = useRouter();router.push()router.push(/);push를 사용하여 페이지를 이동하면 스택이 쌓이면서 뒤로가기가 가능함router.replace()router.replace(/);replace를 사용하면 스택이 쌓이지 않고 뒤로가기가 불가능함응용 const postCommunitySuccess = (response) => { console.log(response); alert("게시글이 등록되었습니다."); setTimeout(() => { router.replace(`/activity/community?stdI..
썸네일 [React] 자식 컴포넌트에서 부모 컴포넌트에게 값 넘기는 방법 ☘️ 파일 구조리액트는 기본적으로 부모가 자식에게 값을 넘길 수 있고, 자식은 부모에게 값을 줄 수 없습니다.기본적인 이러한 원칙을 깨는 방식을 생각해서 딱히 권장하는 방법은 아닌 것 같습니다. ( 제 생각입니다.) - page.js에 각각의 StudyReview 값을 받아서 page.js에 넘겨야 하는 구조☘️ 방법1) 부모 컴포넌트에 state 생성하기이때의 state는 자식 컴포넌트에서 값을 받을 state를 생성해 주면 된다.위에 같은 경우에는 별점과 input의 값을 담을 stdPoint, content를 생성했다. const [studyValue, setStudyValue] = useState({ stdPoint: 0, c..
썸네일 [React] 더보기 버튼 🫧 예시 - 초기에 5개의 항목씩 보여주고 더보기 버튼을 누르면 다음 항목을 보여주는 기능으로 더이상 보여줄 데이터가 없다면 더보기 버튼은 사라짐 🫧 필요한 값 설정 const [reviewList, setReviewList] = useState([]); // 리뷰 목록 const pageSize = useRef(5); // 보여줄 목록 수 const [totalPage, setTotalPage] = useState(); // 총 페이지 const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 꼭 필요한 값은 4가지이다. ① 보여줄 데이터의 값 ② 한 페이지의 보여주고 싶은 목록의 수 (한 페이지당 보여줄 값은 고정값이므로 useRef를 사용함) ③ 목..
[React #31] ToDo List - useState에서 useReducer로 변경 🌵 Step 01 useReducer의 훅을 호출한 뒤, reducer 함수를 생성하고 인수로 전달하고 초기값도 전달해 줌 function reducer() {} function App() { const [todos, dispatch] = useReducer(reducer, mokData); } 🌵 Step 02 상태 변화 함수에서 dispatch를 호출한 뒤 Action 객체를 생성하여 전달 const onCreate = (content) => { dispatch({ type: 'CREATE', data: { id: idRef.current, isDone: false, content: content, data: new Date().getTime(), }, }); }; 🌵 Step 03 reducer 함..
썸네일 [React #30] useReducer 🌵 useReducer()란? 의미 컴포넌트 내부에 새로운 state를 생성하는 React Hook으로, 모든 useState는 useReducer로 대체 가능함 useState와 차이 : 상태 관리 코드를 외부로 분리할 수 있음 state와 reducer 예시 useState는 상태를 관리하는 코드를 컴포넌트 내부에서 사용해서 UI를 렌더링 하는 코드보다 state를 관리하는 코드들이 더 복잡하고 길어지게 되면서 가독성이 떨어지고 유지보수가 힘들어짐 상태 코드들이 복잡할 때 이 코드들을 외부의 별도 함수로 분리할 수 있는 useReducer를 사용 🌵 useReducer 기본 형태 기본 import { useReducer } from 'react'; function Exam() { const [stat..
썸네일 [React #29] ToDo List - Update / Delete 🌵 리스트에서 값 변경하기 선택한 ID와 일치하는 항목의 프로퍼티를 변경하는 기능으로, 체크 박스에서 체크하면 해당 항목만 체크로 변경하기 App.jsx const onUpdate = (targetId) => { setTodos( todos.map((todo) => todo.id === targetId ? { ...todo, isDone: !todo.isDone } : todo ) ); }; setTodos의 인수로는 todos 배열에서 targetId와 일치하는 id를 갖는 요소의 데이터만 바꾼 새로운 배열을 전달해야 함 TodoItem.jsx function TodoItem({ id, isDone, content, date, onUpdate }) { const onChangeCheck = () => ..
썸네일 [React #28] ToDo List - Read 📌리스트 읽어오기 App.jsx에서 List 컴포넌트에 props로 todos 리스트를 전달하고, List.jsx → TodoItem.jsx에서 받기 List.jsx import TodoItem from './TodoItem'; function List({ todos }) { return ( ToDo List ☘️ {todos.map((todo) => { return ; })} ); } export default List; map() 이용해서 배열에 담긴 값을 리스트 형태로 반복적으로 렌더링 해줌 map은 배열의 모든 요소에 대해서 콜백 함수를 실행한 뒤 리턴한 반환 값들을 새로운 배열로 반환함 todo에 담긴 모든 값을 props로 전달하기 위해 스프레드 연산자로 모든 데이터를 전달해줌 리스트 형태로 ..
썸네일 [React #27] ToDo List - Create 📌임시 데이터 생성 const mokData = [ { id: 0, isDone: false, content: '리액트 공부', date: new Date().getTime(), }, { id: 1, isDone: false, content: '치과', date: new Date().getTime(), }, { id: 2, isDone: false, content: '운동하기', date: new Date().getTime(), }, { id: 3, isDone: false, content: '장보기', date: new Date().getTime(), }, ]; 📌리스트 추가하기 App.jsx import { useState, useRef } from 'react'; import './App.css';..
썸네일 [React #26] ToDo List - UI 구현 🩷Header Header.jsx function Header() { return ( 오늘은 📅 {new Date().toDateString()} ); } export default Header; Date 객체 생성할 때 toDateString() 메서드를 호출하여 문자열로 읽기 편한 형태로 변환 Header.css .Header > h1 { color: rgb(37, 147, 255); } 🩷Editor Editor.jsx function Editor() { return ( 추가 ); } export default Editor; Editor.css .Editor { display: flex; gap: 10px; } .Editor > input { flex: 1; padding: 15px; border:..
썸네일 [CSS] display / grid / flex displayHTML 요소들을 어떻게 보여줄지 결정하는 속성하위 속성 : none, block, inline, inline-block, grid, flex 등이 있음📑 block기본적으로 가로의 길이는 100%로, 한 줄에 하나의 div만 배치가 되고,원하는 높이와 너비를 적용할 수 있음.block { display: block; width: 300px; height: 300px;}📑 inline기본적으로 한 줄에 여러 개의 div 배치가 되고,길이와 높이의 값을 설정해도 div 안의 내용에 따라 길이와 높이가 결정됨.inline { display: inline; width: 300px; height: 300px; margin: 5px;}📑 inline-blockinline의 특징과 b..
썸네일 [React #25] React LifeCycle / UseEffect 01. 리액트 컴포넌트의 라이프사이클 Mount (마운트) 컴포넌트가 화면에 처음으로 렌더링 되는 순간 ex) 서버에서 데이터를 불러올 때 Update (업데이트) 마운트 이후 컴포넌트가 다시 렌더링 되는 순간 = 리렌더링 되는 순간 ex) 서버에서 값이 변경될 때 UnMount (언마운트) 컴포넌트가 화면에서 사라지는 순간 ex) 메모리를 정리할 때 💡 라이프 사이클 제어 컴포넌트의 라이프 사이클 단계별로 각각 다른 작업을 수행하도록 만드는 것 라이프 사이클 제어는 useEffect를 이용해서 쉽게 구현할 수 있음 02. UseEffect 컴포넌트 동작에 따른 파생되는 효과인 사이드 이펙트를 제어하는 리액트 훅 컴포넌트에 어떠한 값이 변경되었을 때, 특정 코드를 실행시키거나 제어하는 것을 만들 수 있음..
썸네일 [React #24] COUNTER APP 만들기 01. 직접 짠 코드 📑 Header.jsx const Header = () => { return ( Simple Counter ); }; export default Header; 📑 Viewer.jsx import { useState } from "react"; const Viewer = () => { const [count, setCount] = useState(0); const countHandler = (e) => { setCount(count + parseInt(e.target.innerText)); }; return ( 현재 카운트 : {count} -1 -10 -100 +100 +10 +1 ); }; export default Viewer; 📑 App.jsx import "./App.css"..
라이브러리 브랜드 그룹 | 배움엔 끝이 없다

티스토리툴바