React5 [React] 리액트 버전 17 VS 18 이번 주제도 스타트업 면접에서 받은 질문이다 암기력 테스트 같아서 좋아하진 않는 질문이지만 질문을 받은 김에 정리해 보려고 한다 2022년 3월 업데이트 된 React 18.0.0 버전의 주요 키워드는 "Concurrency(동시성)"이다 동시성이란 자바스크립트의 싱글 스레드라는 한계를 극복하여 사용자 경험을 향상시키기 위해 여러 작업을 다루는 해결책이다 실제로 여러 작업이 병렬로 처리되진 않지만 여러 작업들을 빠르게 전환하면서 동시에 수행되는 것처럼 느끼게 해준다 이러한 동시성 모드를 사용하기 위해서는 index.js에서 이전 버전의 root.render() 메서드 대신에 createRoot() 메서드를 사용하면 되는데 CRA(create-react-app)로 프로젝트를 빌드하면 자동으로 설정된다 1... 2024. 2. 14. [Recoil] 사용법 리코일 이란? React에서 사용하는 Recoil은 상태 관리 라이브러리로, Facebook에서 개발한 오픈 소스 라이브러리이다. Redux나 Context API와 같은 다른 상태 관리 도구와 비교될 수 있지만, Recoil은 특히 복잡한 상태 관리 및 컴포넌트 간의 데이터 공유를 보다 간편하게 만드는 데 중점을 둔다. Redux는 훨씬 오래되었지만 보일러플레이트 코드가 많은 단점이 있다(그럼에도 가장 많이 쓰임). contextAPI는 react 내장 api이지만 비동기 처리가 비교적 어렵고, 렌더링 최적화를 별도로 해주어야 하기 때문에 규모가 커질수록 외부 라이브러리를 사용한다. Redux는 React처럼 페이스북팀에서 만들었기 때문에 신뢰성과 높은 호환성을 기대할 수 있다. 코드량이 적어도 높은 .. 2024. 1. 27. [TIL] axios 모듈화하기 with Typescript 모듈화 하는 이유? 코드량이 많아질 수록 중복되는 코드가 많아져서 유지보수가 힘들어지고 개발 편의성이 떨어짐 how? 리액트 프로젝트일 경우 src 안에 api폴더를 생성, core.ts 파일을 생성한다 이곳에 인스턴스를 위한 객체를 선언하고 다른 파일에서 import하여 사용한다 src/api/core.ts import axios, { AxiosInstance } from "axios" export const api: AxiosInstance = axios.create({ baseURL: "/api", timeout: 500000, }) 인터셉터라는 것을 사용하면 에러 처리나 res = res.data와 같은 동작을 미리 적용할 수 있다 인터셉터 네트워크 요청, 응답을 가로채어 처리하거나 수정하는데 사.. 2023. 11. 14. [React js] Redux 프롭스가 많아지면 쓰기 불편해서 쓰기 싫을 때 쓴다. 1.띄어쓰기를 해서 2개를 동시에 설치한다. yarn add redux react-redux 2.index.js 에 import하고 다음과 같이 app component를 Provider로 감싸준다 (감싸진 애들끼리 props 없이 state 공유 가능) 3. createStore로 state를 만든다. let store = createStore(()=>{}); 4. Provider에 값을 전달한다. 그냥 바로 store로 쓸수는 없고 세팅을 해야한다. 5. Cart.js에서 다음 함수를 추가하고 export default부분을 다음과 같이 바꾼다. function state를props화(state) { return { state : state } }.. 2021. 8. 13. [React js] props 대신 쓸 수 있는 context API 1. 범위를 생성한다 let 재고context = React.createContext(); 2. 같은 값을 공유할 범위를 지정한다 { shoes.map((a,i)=>{ return ( ) }) } 3. 변수로 받아오기 & 사용하기 function Card(props) { let 재고 = useContext(재고context); return ( { props.shoes.title } { props.shoes.content } & { props.shoes.price } {재고[props.i]} ) } export default App; hook이기 때문에 자동으로 import 할 수 있음 # 다른 파일(Detail.js)에서도 context를 쓰는 방법 1. 생성한 범위 앞에 export를 붙여준다. ex.. 2021. 8. 13. 이전 1 다음
