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 이 어떤 영역인지 한 눈..

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..

공통되는 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 - 현재 가지고 있는 형태나 모양을 정의- 컴포넌트의 상태를 의미- 변화할 수 있는 동적인 값- 상태변화를 감지해 자동으로 리렌더링을 함- 하나의 컴포넌트에 여러개의 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 해야 할 때에는  스프레드 연산자를 ..

JSX  - 원래는 return 값에 HTML 들어가면 문법적 오류임    - 하지만 JSX 문법은 적법하다고 해줌!    - JS와 HTML 을 함께 사용하게 해주는 것 뿐만 아니라 동적 렌더링도 가능하게 해줌  실제 코드   - 중괄호 내부에 JS 값을 활용할 수 있음- 숫자, 문자열 모두 사용 가능하고 연산과 삼항 연산자도 사용 가능함   JSX 문법 주의사항 1.  중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다     - 자바스크립트 표현식 : 한 줄의 코드가 특정한 값으로 평가될 수 있는 식    - 중괄호 안에 if문/for문같은 조건문/ 반복문은 에러가 발생함    2. 숫자, 문자열, 배열 값만 렌더링 된다     - 불리언, undefined, null 은 에러가 발생하진 않지만 렌..

React 시작하기- vite 활용   1. npm create vite@latest   2. npm i - package.json 에 있는 값들을 설치- 설치하면 node_modules에 설치됨    폴더 살펴보기 public- 이미지, 폰트 등을 저장하는 공간 src- 실제 소스코드를 저장하는 공간- jsx : react 가 작성되는 파일 확장자- assets : public과 같이 이미지, 폰트 등을 저장하는 공간- eslintrc.cjs : 개발자들의 코드 스타일 통일에 도움되는 도구    3. npm run dev    React App의 구동 원리    - localhost : 자기 자신의 컴퓨터 주소 (다른 컴퓨터에서는 접속 불가)- 포트번호 : 하나의 컴퓨터 내에서 여러개의 서버를 동작시키..

지난번에 이어 인프런 - 한입 크기로 잘라먹는 리액트 강의 공부 내용이다강의를 통해 알려주는 것 외에도 헷갈리는게 많아서이것저것 직접 시도해보면서 정리해보았다   1. 함수 선언식 - 함수 자체를 변수에 담을 수 있음    - ( ) 를 열면 함수가 실행되기 때문에 콘솔에 "funcA 실행"이 출력됨   - varA에 변수를 담으면서 funcA( )가 실행되기 때문에 console에 "funcA 실행" 문구가 출력됨- funcA의 반환값이 없기 때문에 varA에는 값이 저장되지 않고 undefined가 출력됨   - 실행 안한 funcA 함수 자체를 varA에 담았고, varA를 호출'( )' 하면서 console에 "funcA 실행" 문구가 출력됨   - ( ) 즉, 실행하지 않으면 어떤것도 콘솔에 출..