개발새발개발/React

useReducer컴포넌트 내부에 새로운 State를 생성하는 React Hook모든 useState는 useReducer로 대체 가능useState는 state를 관리하는 코드를 컴포넌트 내부에만 작성 가능하지만, useReducer를 사용하면 state를 관리하는 코드를 컴포넌트 외부에 작성할 수 있어 코드의 가독성을 높일 수 있다  사용하기import { act, useReducer } from 'react';const reducer = (state, action) => { if (action.type === 'INCREASE') { return state + action.data; } else if (action.type === 'DECREASE') { return s..

최적화(Optimization) 적용1. 시기 : 하나의 프로젝트를 거의 완성한 상태에서 시행기능 구현 → 최적화최적화를 먼저 하면 기능 수정할 때 최적화가 풀리거나 꼬여서 작동을 안할 수도 있음 2. 적용 대상 : 꼭 최적화가 필요한 것에만 시행최적화도 마찬가지로 연산이 필요하기 때문에, 단순한 연산일 경우 그냥 리렌더링 되도록 두는게 더 빠를 수도 있음TodoItem을 생성하는 것과 같이 유저의 행동에 따라 개수가 많아질 수 있는 컴포넌트혹은 함수들을 많이 가지고 있어 무거운 코드의 경우 적용하는 게 좋음   useMemo"메모이제이션" 기법을 기반으로 불필요한 연산을 최적화하는 리액트 훅반복되는 내용을 저장해뒀다가 필요할 때 꺼내 쓰는 느낌useMemo를 사용하면 연산 자체를 메모이제이션 할 수 있..

Context컴포넌트간의 데이터를 전달하는 또 다른 방법기존의 Props가 가지고 있던 단점(Props drilling)을 해결굳이 부모컴포넌트에서 깊이 있는 자식 컴포넌트까지 갈 필요 없이 바로 가져다 사용 가능(Store와 비슷)  사용해보기 1. import createContext import { createContext } from 'react';  2. Context 생성해서 exportexport const TodoContext = createContext();  3. 사용할 자식 컴포넌트 감싸기 return ( );value에 넘겨줄 값 담기(여러개일 경우 객체로 주기)   4. context에서 값 가져오기i..

tailwind css의 특성 상  코드가 끝없이 길어지는 건 자주 일어나는 일이다또한 display : flex를 사용하다보면 div가 많이 사용되어 전체 코드를 봤을 때,각 영역을 한눈에 구분하기가 어렵다이로인해 전체 코드의 가독성이 떨어지게 된다!   그래서 오늘은  React + TypeScript + Tailwind를 사용할 때재사용 가능한, 가독성 높이는 UI 컴포넌트 만드는 방법에 대해 이야기해보려한다!    저도 배우고 공부하고 있는 학생입니다무조건 제 코드가 정답은 아닙니다 :)   전후 코드 비교해보기  개선하기 전 코드인 왼쪽을 봤을 때, 일단 가로로 무척 길어서 코드를 한 화면에 보기 어렵다또한 div와 section이 얽혀있어 각각의 div와 section 이 어떤 영역인지 한 눈..

강의에서 말한것 그대로 Prettier를 설치해서 사용하고 있었는데,어느 순간부터 Prettier를 쓰려고 하면 저렇게 빨간 표시가 뜨면서 적용이 안됐다  그래서 오늘은 나와 같은 문제를 겪고 계신 분들을 위해인터넷에 있는 여러가지 방법을 이것저것 다 해보면서 찾아낸해결방법을 공유하려고 한다  방법1 간단하다. 재설치 후 재부팅Prettier를 삭제 후 재설치하고Ctrl + Shift + P -> Reload   하지만 이렇게 간단히 해결될 문제였으면 구글링을 할 필요가 없지....!  방법2모두가 다 해보라고 하는 설정 확인하는 것 [파일] - [기본 설정] - [설정] or Ctrl + , 으로 설정에 들어가서1. Format On Save가 체크되어있어야 하며(저장할 때 Prettier 적용하는 역..

Todos 앱 만들기index.tsximport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);root.render( );   App.tsximport { useRef, useState, useEffect } from 'react';import { Todo } from './Type';import './App.css';import Editor from './components/Editor';import TodoI..

React와 Typescript로 Todos 앱만들기를 공부하던 중 오류 발생!  오류 코드import { useRef, useState, useEffect } from 'react';import { Todo } from './Type';import './App.css';import Editor from './components/Editor';import TodoItem from './components/TodoItem';function App() { const [todos, setTodos] = useState([]) const idRef = useRef(1) const onClickAdd = (text:string) => { setTodos([ ...todos, { ..

공통되는 state를 하나로 합치기 1. useState를 input 값의 항목을 담은 객체로 수정2. 이벤트 핸들러를 setInput으로 수정  - 스프레드 연산자 활용하여 수정하려는 값 외의 나머지 값은 그대로 유지하도록 하기3. return 값의 value 값을 input.name / input.country 등으로 수정  import { useState } from "react"const Register = () => { const [input,setInput] = useState({ name : "", birth: "", country : "", bio : "", }) console.log(input) const onChangeName = (e) => { set..

State와 Props  - 부모로부터 받는 props 값이 바뀌면 리렌더링이 발생함    - + 버튼을 눌렀는데 OFF 가 함께 출력됨 - 부모 컴포넌트가 리렌더링됐기 때문에 자식도 함께 리렌더링이 발생함  리렌더링이 되는 순간1. 자신이 관리하는 state의 값이  변동2. props 의 값이 변경3. 부모 컴포넌트가 리렌더링    이런 불필요한 리렌더링은 성능을 악화시킴-> 관련 없는 컴포넌트를 한번에 몰아두지 않고 분리함   전체 코드 한번 보기...  Bulb.jsxCounter.jsx 로 파일 나누기 파일 위에 useStateexport default App.jsx 에서는 import   State로 사용자 입력 관리하기회원가입 만들기 input 값에 접근하기1. input값 만들기2. use..

State - 현재 가지고 있는 형태나 모양을 정의- 컴포넌트의 상태를 의미- 변화할 수 있는 동적인 값- 상태변화를 감지해 자동으로 리렌더링을 함- 하나의 컴포넌트에 여러개의 state를 생성할 수 있음   - 두 가지 요소가 전달되는 것을 확인할 수 있음   - 첫번째 요소 : 새롭게 생성된 state의 값(초기값). 인수로 전달받음- 두번째 요소 : 상태 변화 함수(state를 변경시키는 함수)    - 그렇기 때문에 대부분의 경우 구조분해할당으로 받음   state 변경   - setState를 활용함   Count로 수 늘려보기 - +버튼을 클릭할 때마다 변경 사항을 감지해 리렌더링해줌   전구 키고 끄기  - 삼항 연산자를 사용하여 보기 좋게 만들 수 있음  import './App.css'i..

이벤트 핸들링 - 이벤트가 발생했을 때 그것을 처리하는 것ex) 버튼 클릭 시 경고창 노출 등  버튼 클릭 이벤트 만들기 방법 1const Button = ({text,color,children}) => { return ( { console.log(text) }} style={{color :color}}>{text} )}Button.defaultProps = { color : "blue"}export default Button  방법2const Button = ({text,color,children}) => { const onClickButton = () => { console.log(text) } return ( {..

Props  - 자식 컴포넌트에게 props를 전달해주면 객체로 묶여서 자식 컴포넌트에 매개변수로 전달됨     - 프롭스로 color 값을 넘겨서 스타일 설정도 가능함- 하지만 모든 코드에 color가 들어가지 않을 수 있으므로 코드 개선이 필요함   const Button = (props) => { return ( {props.text} )}Button.defaultProps = { color : "blue"}export default Button - 그럴 땐 위와 같이 default 값을 넘겨주면 됨   - 객체로 전달받기 때문에 점 표기법으로 값을 꺼내오는데 이게 불편하면 매개변수를 아예 나눠서 받는 방법도 있음   - 여러개를 props 해야 할 때에는  스프레드 연산자를 ..