Tiny Bunny
본문 바로가기

JavaScript/React28

React - 소수판별기 구현 소수판별하는 함수 만들어서 리액트에 적용 숫자를 입력하고 버튼 누르면 1~해당 숫자 사이의 소수 갯수를 나타냄 console.clear(); import React, { useState } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; // 소수 판별기(넘겨진 값이 소수인지 아닌지) function isPrimeNumber(num) { if (num { e.preventDefault(); const form = e.target; form.number.value = form.number.value.trim(); if (form.number.value.length == 0).. 2024. 3. 29.
React - Hook(2)_useMemo, 활용(소수 판별) useMemo : 컴포넌트의 성능을 최적화하는데 사용되는 훅 memoization을 뜻함 -> 메모리에 넣기! 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 값을 계산할 때 메모리에 저장하고 필요할 때마다 재사용 useMemo를 사용한 컴포넌트 순서: 랜더링 > 함수 호출 > memoization된 함수 재사용 (기본 함수형 컴포넌트 순서: 랜더링 > 함수 호출 > 초기화) 구조 : const value = useMemo(() => { return x(); },[item]) -> useEffect처럼 첫 번째 인자를 콜백함수, .. 2024. 3. 29.
React - 할 일 폼 만들기(4)_수정 수정 UI const TodoListItem = ({ todo, removeTodo: _removeTodo }) => { const [editMode, setEditMode] = useState(false); const readMode = !editMode; const enableEditMode = () => { setEditMode(true); }; const removeTodo = () => { _removeTodo(todo.id); }; const cancleEdit = () => { setEditMode(false); }; const commitEdit = () => { setEditMode(false); }; return ( {todo.id} {readMode ? ( {todo.title} 수정.. 2024. 3. 28.
React - 부모, 자식 관계 console.clear(); import React, { useState } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; let AppCallCount = 0; let SubCallCount = 0; const Sub = () => { SubCallCount++; console.log(`Sub ${SubCallCount}번 실행됨`); const [no, setNo] = useState(0); return ( setNo(no + 1)}>Sub 버튼 : {no} ); }; const App = () => { AppCallCount++; console.log(`App $.. 2024. 3. 28.
React - Hook활용 useEffect, useRef, useState 이용 console.clear(); import React, { useState, useRef, useEffect } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; let AppCallCount = 0; const App = () => { AppCallCount++; console.log(`1App이 ${AppCallCount}번 실행`); const inputNameRef = useRef(null); const inputAgeRef = useRef(null); const [no, setNo] = useState(0); .. 2024. 3. 28.
React - Lifecycle, Hook(useState, useEffect, useRef) Lifecycle: 생성(mounting) -> 업데이트(updating) -> 삭제(unmounting) -> 각각이 생명주기 메서드라고 함 React Hook : 함수형 컴포넌트에서 사용되는 몇가지 기술, 함수현 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해줌 규칙 1. 반복문, 조건문, 중첩된 함수 내에서 호출이 불가능, 반드시 최상위에서만 Hook을 호출해야함 규칙 2. React 함수 내에서만 호출해야함 대표적인 예) useState, useEffect useState: Component에서 상태값을 추가할 때 사용 const[변수명, 상태를 업데이트 할 함수명] = useState(초기값) -> useState로 선언된 변수는 상태가 변할 때마다 페이지를 리렌더링 시킴, 상태를 업.. 2024. 3. 28.
React - 할 일 폼 만들기(3)_삭제, plantuml(구조 파악) 할 일 삭제 console.clear(); import React, { useState } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; const TodoWriteForm = ({ newTodoTitle, setNewTodoTitle, addTodo }) => { return ( setNewTodoTitle(e.target.value)} /> 할 일 추가 ); }; const TodoListItem = ({ todo, todos, index, setTodos }) => { console.log(`index : ${index}`); const removeTodo = ().. 2024. 3. 27.
React - 할 일 폼 만들기(2)_ul, li, 컴포넌트 분리(2) 3) 할 일 리스트 ul,li로 표현 console.clear(); import React, { useState } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; const TodoWriteForm = ({ newTodoTitle, setNewTodoTitle, addTodo }) => { return ( setNewTodoTitle(e.target.value)} /> 추가 ); }; const App = () => { const [todos, setTodos] = useState([]); const [newTodoTitle, setNewTodoTitle] = useSt.. 2024. 3. 26.
React - 할 일 폼 만들기(1)_배열, 컴포넌트 분리 1) 할 일 추가(배열) console.clear(); import React, { useState } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; const App = () => { const [todos, setTodos] = useState([]); const [newTodoTitle, setNewTodoTitle] = useState(''); const addTodo = () => { setTodos([...todos,newTodoTitle]); } return ( setNewTodoTitle(e.target.value)} /> 추가 {JSON.stringify.. 2024. 3. 26.

티스토리툴바