React (6) 썸네일형 리스트형 [React] vite로 프로젝트 template 만들기 vite 프로젝트 생성npm create vite@latest 의존성 설치npm i prettier 설치npm install --save-dev --save-exact prettier .prettierrc 파일 생성{ "singleQuote": true, "semi": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80, "bracketSpacing": true, "arrowParens": "avoid", "endOfLine": "auto"} eslint config prettier 설치npm install --save-dev eslint-config-prettier eslint.config.js 파일에 추가import js fr.. [React] useRef useState()의 경우 값이 바뀌게 되면 재랜더링 되며 화면이 변경되지만useRef()는 값이 바뀌어도 재랜더링 되지 않기 때문에 화면이 변경되지 않습니다. 그럼 let으로 선언한 변수와 차이점이 없다고 생각할 수 있습니다.const App = () => { const [count, setCount] = useState(0) const countRef = useRef(0) let counter = 0 return ( )}useRef()의 값은 재랜더링 되어도 변경되었던 값을 가지고 있지만 let으로 선언한 변수는 재랜더링 시 값이 초기화 됩니다. let 변수를 컴포넌트 밖에 사용하면 변경한 값을 기억할 수 있습니다.let counter = 0const App = () => { .. [React] Context API를 사용하기 전에 고려할 점 어떠한 props를 여러 레벨 깊이로 전달해야 한다고 해서 꼭 context api를 사용해야 하는 것은 아닙니다. props가 여러 컴포넌트를 지나가는 것은 어떤 컴포넌트가 어떤 데이터를 사용하는지 명확히 보여줍니다.데이터의 흐름이 props를 통해 분명해져 유지보수 하기에도 좋습니다. JSX의 children으로 props를 전달하면 level을 줄일 수 있습니다.// JSX children 사용 전// JSX children 사용 후 상태를 변경할 때마다 재랜더링이 되기 때문에 상태 변경이 적은 기능에 context api를 적용하는 것이 좋습니다.테마 (다크 모드)로그인 (계정 세션) Context API 사용 방법// MyContext.jsexport const MyContext = create.. [React] 객체 업데이트 useState를 사용하여 객체를 업데이트 할 때의 방법입니다.const [form, setForm] = useState({ title: '제목', description: '설명',})const handleInputChange = (e) => { setForm({ ...form, [e.target.name]: e.target.value, })}input이 여러 개여도 해당 방법으로 input의 값을 모두 변경 가능합니다. 중첩 객체를 업데이트 할 때에는 immer 라이브러리를 사용하면 코드 가독성에 좋습니다.immer 사용 전const [form, setForm] = useState({ title: '제목', description: '설명', info: { level: 1,.. [React] useReducer useState와 같이 상태를 변경하는 훅입니다.import { useReducer } from 'react'const [state, dispatch] = useReducer(reducer, initValue) dispatchdispatch로 보낸 값으로 reducer 함수에서 상태를 변경할 수 있습니다.const handleIncrease = (num) => { dispatch({ type: 'INCREASE', payload: num, })}const handleDecrease = (num) => { dispatch({ type: 'DECREASE', payload: num, })} reducer 함수매개변수로 state와 action을 받을 수 있습니다.state는 in.. [React] 다양한 Slot 활용 방법 childrenComponent의 Props에는 children이라는 고유 속성이 있습니다. Component 사이에 작성한 코드(아래 이미지에서 ul 태그)를 Props로 넘겨줍니다. Propsprops로 코드를 넘겨줄 수도 있습니다.tabContent는 children으로, buttons props는 buttons로 slot을 사용하는 것을 볼 수 있습니다. 위 이미지에서 menu 태그가 아닌 동적으로 설정하고 싶을 수 있습니다.그런 경우에도 props로 넘겨줄 수 있습니다.컴포넌트는 대문자로 시작하기 대문자 변수로 새로운 상수를 만들어 사용합니다. 처음부터 대문자로 넘겨주어도 됩니다. 만약 태그가 아닌 컴포넌트를 가져오고 싶다면Section(), 이 아닌 컴포넌트 함수의 이름만 넘겨주어야 합니다... 이전 1 다음
