본문 바로가기

react6

기존 CRA 프로젝트에 TypeScript 추가하기 메인 프로젝트를 진행 중, CRA로 이미 프로젝트 초기 구성을 해 놓은 상태에서 TypeScript를 사용하는게 어떻냐는 의견이 나왔다. 아직 prettier, eslint 정도만 설정해 놓았기 때문에 새로 CRA를 만드는 것이 편했지만, 이번 기회에 기존의 CRA에 TS를 추가해보기로 했다. ✨ CRA DOC 참고하기 CRA Doc는 매우 친절하게 모든 것을 알려주기 때문에, 꼭 궁금한 것이 있으면 찾아보는 것을 추천한다. https://create-react-app.dev/docs/adding-typescript/#installation Adding TypeScript | Create React App Note: this feature is available with react-scripts@2.1... 2023. 3. 7.
[react] useState 사용 시, 주의할 사항 ✨ state는 바로 변경되지 않는다. setState를 사용했다고 해서, 바로 state의 값이 변경되는 것은 아니다. setState를 사용하면, 새 state값을 받아서 컴포넌트 리렌더링 큐에 등록한다. - 다음 리렌더링 시, useState가 반환하는 첫번째 값은 갱신된 최신 state가 된다. 즉, 다음 리렌더링 시에 useState가 호출되면서 돌려주는 값이 업데이트된 state값이 된다. setState 사용 시, 바로 업데이트 하지않는 이유는 성능 향상 때문이다. 성능 향상을 위해 state를 setState호출 시마다 계속 업데이트하는 것이 아니라, 모아두고 한 번에 업데이트를 진행한다. 이를 Batching이라고 한다. https://12ahn22.tistory.com/entry/Rea.. 2022. 12. 27.
[react] 조건부 렌더링에 대한 고민.. 오늘 과제를 진행하면서 조건부로 렌더링을 해야하는 경우, 조건이 너무 많다면 어떻게 렌더링을 해야할까?라는 생각이 들었다. 조건이 적다면 if문을 써서 분기처리를 해주면 되지만 만약 조건이 너무 많은 경우 위 코드에서 if문이 계속 계속 늘어나게 될 것이다. 그렇다면 코드가 너무 길어 보기 싫어질 것이다. 조건이 많다면 어떤 방법을 쓰는 것이 좋을까? ✨ switch-case 방식 switch-case를 사용하면 그래도 if문 보다 코드가 읽기 쉽다고 생각한다. 이런 부분은 주관이라 다를 수 있지만 반복적으로 type === "타입"을 반복적으로 적어주지 않아도된다. const Item= ({type})=>{ switch(type){ case 'png': return case 'jpg': return /.. 2022. 12. 16.
[React 18] Batching 배칭 🎉 배칭이란? React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링으로 묶는 것을 의미한다. batch의 의미 자체가 일괄처리다. 🎉 리액트 배치 예시 하나의 클릭 이벤트 안에 두 개의 state 업데이트(setState)를 가지고 있다면 React는 이 작업들을 배칭하여 하나의 리렌더링으로 만든다. 아래 코드는 버튼을 누를 때 마다, count와 flag 상태가 변경되지만 리렌더링은 단 한번만 수행한다. function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount((c) => c + 1); // 아직 리.. 2022. 12. 12.
[react-quill] addrange() the given range isn't in document 오류 코드 addrange() the given range isn't in document 해결 방법 매 렌더링 마다 moudles을 계속 생성하고 있기 때문에 발생하는 오류 따라서 module 변수를 useMemo를 사용해주면된다. const modules = useMemo(() => { return { toolbar: { container: [ ['image'], [{ header: [1, 2, 3, false] }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], ], handlers: { // 이미지 처리는 우리가 직접 imageHandler라는 함수로 처리할 것이다. image: imageHandler, }, }, }; }, []); 참고 .. 2021. 8. 1.
[ React ] <option>에 selected 사용하기 ✋ 에러 코드 Use the `defaultValue` or `value` props on instead of setting `selected` on . 👍 상황 리액트를 사용할 때, select에서 selected 옵션을 사용하고 싶은데, 리액트에서 selected를 사용하면 위와 같이 defaultValue를 사용하라고 에러가 뜬다. 🎶 해결 selected 대신에 가장 위에 있는 select에 defaultValue나 value를 option 태그에 있는 value 값으로 쓰면 된다. 게시 여부 : 게시함 게시안함 https://ko.reactjs.org/docs/forms.html 폼 – React A JavaScript library for building user interfaces ko.re.. 2021. 7. 14.

티스토리툴바