리액트3 [React] 리액트 버전 17 VS 18 이번 주제도 스타트업 면접에서 받은 질문이다 암기력 테스트 같아서 좋아하진 않는 질문이지만 질문을 받은 김에 정리해 보려고 한다 2022년 3월 업데이트 된 React 18.0.0 버전의 주요 키워드는 "Concurrency(동시성)"이다 동시성이란 자바스크립트의 싱글 스레드라는 한계를 극복하여 사용자 경험을 향상시키기 위해 여러 작업을 다루는 해결책이다 실제로 여러 작업이 병렬로 처리되진 않지만 여러 작업들을 빠르게 전환하면서 동시에 수행되는 것처럼 느끼게 해준다 이러한 동시성 모드를 사용하기 위해서는 index.js에서 이전 버전의 root.render() 메서드 대신에 createRoot() 메서드를 사용하면 되는데 CRA(create-react-app)로 프로젝트를 빌드하면 자동으로 설정된다 1... 2024. 2. 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 다음