본문 바로가기

FrameWork/React

 (3)
[React] Prettier 설정 → package.json 입력후, npm i{ "name": "react_practice", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "lint": "eslint ." }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", "eslint": "..
[React] 함수형 컴포넌트 단축키 플러그인 함수형 컴포넌트로 개발을 하는게 좋다.→ ES7+ React/Redux/React-Native snippets [ 함수형 컴포넌트 생성 단축키 ]1. rfce (React Funtion Component)→ 표준 함수 선언을 사용하여 컴포넌트를 정의한다.→ 함수 내부에서 this 를 사용할 수 있으므로, 클래스 컴포넌트와 유사한 방식으로 자체 상태(state)를 관리할 수 있다.→ 더 복잡한 컴포넌트나 생명주기 메서드가 필요한 경우, 함수 컴포넌트에 추가적인 로직을 더 쉽게 통합할 수 있다.import React from 'react' function ToDoList() { return ( ToDoList ) } export default ToDoList 2. rafce(React Arrow Functi..
[React] Hook Hook : 컴포넌트에서 상태(state) 나 생명주기 메서드 등의 기능을 사용할 수 있게 해주는 함수 [ useState : 컴포넌트 상태 추가 ]→ 컴포넌트에서 상태를 추가할때 사용. → ‘state’는 현재 상태를 나타내고, setState 는 상태를 업데이트 한다.→ React 에서 상태를 변경할 때는 상태를 직접 수정하는 것이 아니라, 해당 상태를 업데이트 하는 함수를 통해 변경해야 한다. 이렇게 하는 이유는 React 컴포넌트가 상태 변경을 감지하고 적절한 시점에 렌더링을 다시 할 수 있도록 하기 위해서 이다.const [state, setState] = useState(initialState);removeList 예시const [todos, setTodos] = useState([]) // ..

티스토리툴바