JavaScript/React28 React - Recoil(React 상태 관리 라이브러리) React 장점: 편해~~~~ 단점: 공유 데이터는 상위컴포넌트에서 정의해야함 Recoil: react 상태관리 라이브러리 recoil을 쓰는 경우: 데이터를 유지하고 싶을때? 값을 초기화 시키지 않게 하고 싶을때 Atoms: 데이터 상태 단위, Atom이 업데이트됐을 때 해당 Atom을 구독하고 있는 컴포넌트들은 리렌더링 됨 전역으로 고유한 키값을 만든 후 키값을 가지고 컴포넌트에서 useRecoilState로 불러다 씀! (useState를 useRecoilState를 만들고 useRecoilState에 적용할 변수를 전역에서 생성(key, default)하고 해당 값을 넘겨줌) 변수만들때 key 이름들은 동일하면 안돼!!! Selector: 파생된 상태의 일부를 나타냄, (key, get, set).. 2024. 4. 5. React - MUI 라이브러리, forwardRef MUI:Google의 Material Design 을 구현하는 오픈소스 라이브러리!, 리액트 환경에서 필요한 컴포넌트를 쉽게 사용가능 컴포넌트의 속성은 props로 받을 수 있다 alert 속성: variant - fill(내부 색 채우기), outline(테두리 그리기), severity("success","error"와 같은 옵션이 있는데 이 설정에 따라 색이랑 마크가 달라져) ref: 함수 컴포넌트를 구성하는 여러 요소 중 일부를 참조하기 위해 useRef(), refprops를 이용 focus 효과를 주거나, input에서 텍스트 긁어올 때 사용 React.forwardRef: 구성 요소가 자식 컴포넌트에게 참조를 전달하는 기술 참고) https://dygreen.tistory.com/entry/.. 2024. 4. 5. React - CheckBox 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 fruits = ["사과", "바나나", "귤"]; const [selecteds, setSelecteds] = useState( new Array(fruits.length).fill(false) ); const toggleFruitSelected = (index) => { const newSelecteds = selecteds.map((el,_index) => _index == index ? !el .. 2024. 4. 5. React - css변수 css 변수 : css에서 사용할 수 있는 변수(사용자 지정 css 속성) 자바스크립트나 PHP와 같은 프로그래밍 언어에서 널리 사용되는 변수 개념을 css에 도입 필요성: 같은 값을 여러번 사용할 때 편리(코드 간편화) # 주된 색상을 여러번 지정할 때 p { color: #8B008B; } h1 { background-color: #8B008B; } div { border-color: #8B008B; } ↓ css 변수 적용 :root { --primary-color: #8B008B; /* 웹사이트의 주된 색상으로 짙은 보라색(#8B008B)을 --primary-color라는 변수 이름으로 저장한다. */ } p { color: var(--primary-color); } h1 { background-.. 2024. 4. 3. React - 음식 주문 폼 주문옵션: 포장, 배달 라디오버튼 const [deliveryType, setDeliveryType] = useState("포장주문"); // 기본 값: 포장주문 메뉴 선택: 치킨🍗 종류 선택 체크박스 (전체선택) const [sideFoodCount, setSideFoodCount] = useState(0); // 기본 값: 메뉴 개수 0 const options = useMemo(() => ["후라이드치킨",~,"숯불구이 소금/양념 반반"],[]); // 옵션들의 값 지정 const [optionCheckeds, setOptionCheckeds] = useState(new Array(options.length).fill(false)); // 옵션 선택에 대한 변수, 기본은 false! const to.. 2024. 4. 1. React - 할 일 폼 만들기(6)_삭제, 수정, 커스텀 Hook 삭제 기능 const removeTodo = (id) => { const newTodos = todos.filter(todo => todo.id != id); setTodos(newTodos); }; const TodoList = ({ todos, removeTodo }) => { return ( {todos.length == 0 ? ( 할 일 없음 ) : ( 할 일 목록 {todos.map((todo) => ( ))} )} ); }; const TodoListItem = ({ todo, removeTodo: _removeTodo }) => { const removeTodo = () => { _removeTodo(todo.id); }; return ( {todo.id} {todo.title} 삭제 ); .. 2024. 3. 30. React - 할 일 폼 만들기(5)_ 2차원배열, 번호 증가, 매개변수 변경, 목록 UI변경 할 일 입력(2차원 배열) const NewTodoForm = ({addTodo:_addTodo}) => { const [newTodoTitle, setNewTodoTitle] = useState(""); const addTodo = () => { if(newTodoTitle.trim().length == 0) return; const id = 1; const title = newTodoTitle; const newTodo = { id, title }; _addTodo(newTodo); setNewTodoTitle(''); } return ( setNewTodoTitle(e.target.value)} /> 할 일 추가 ); }; newTodo의 값을 객체형식으로 만들어줌 -> {id, title}로 그래.. 2024. 3. 30. React- setState state 값이 변하게 되면 렌더링이 일어난다 -> 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링되어 화면이 바뀌게 되는 것 setState는 state값을 변경시켜주는 함수 useState는 state, setState를 return하면서 초기값을 설정해주는 Hook 숫자 증가 const App = () => { const [number, setNumber] = useState(0); const onClick = () => { setNumber(number + 1); console.log(`number : ${number}`); }; return 숫자 : {number}; }; 해당 코드를 실행했을 때 콘솔은 number가 0,1,2,3으로 출력되고, 화면에는 1,2,3,4로 출력된다 이유는? c.. 2024. 3. 30. React - Hook(3)_useCallback ✨메모이제이션(memoization) : 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 useCallback: 메모이제이션된 함수를 반환하는 함수, 이전에 생성된 함수를 기억하고 해당 함수 재사용 함수와는 상관없는 상태 값이 변할 때 함수 컴포넌트에서 불필요하게 함수를 업데이트하는 것을 방지 REACT - Hook(2)_useMemo, 활용(소수 판별) useMemo : 컴포넌트의 성능을 최적화하는데 사용되는 훅 memoization을 뜻함 -> 메모리에 넣기! 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리에 저장함으로써 동일한 ohyohyo.tistory.com useMemo , useCallback 차이 useMemo useCallback 재사용 계산 비용이 큰 연산의.. 2024. 3. 29. 이전 1 2 3 4 다음
