본문 바로가기

공부/리액트8

기존 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-redux] 리액트에서 리덕스 사용하기 ✨ 리덕스란? 자바스크립트 어플리케이션을 위한 예측 가능한 상태 관리 라이브러리 리덕스가 생겨난 이유 자바스크립트 싱글 페이지 어플리케이션이 갖추어야하는 요건이 복잡해지면서, 어느때보다 많은 상태를 자바스크립트 코드로 관리할 필요성이 생겨났다. 여기서 상태란, 서버 응답, 캐시 데이터, 지역적으로 생성해 쓰지만 아직 서버에 저장되지 않은 데이터 이외에도 활성화된 라우트, 선택된 탭, 로딩 여부, 페이지네이션 컨트롤 등의 다양한 UI 상태를 의미한다. 리덕스는 이런 복잡한 상태들을 더 편리하게 관리하기 위해서 만들어진 라이브러리이다. 리액트에서만 사용할 수 있는 것이 아니라 자바스크립트 어플리케이션에서는 리덕스를 사용할 수 있다. 리덕스의 3가지 원칙 단일 출처 원칙 상태는 읽기 전용 리듀서는 순수 함수로.. 2022. 12. 28.
[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.

티스토리툴바