자바스크립트/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. [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. [React js] Ajax Ajax 서버에 새로고침없이 요청을 할 수 있게 도와줌 1.jquery $.ajax() 2.axios.get() 3.쌩 자바스크립트 fetch() yarn add axios (또는 npm install axios) onClick={()=>{axios.get()}} get요청 .then() 요청성공시 실행하는 코드 .catch() 요청실패시 실행하는 코드 then(result) 가져온 result.data 결과 데이터만 json은 따옴표가 쳐져있음 object가아님. 서버와 통신은 텍스트로만 되기때문. axios를쓰면 json을 object로 알아서 바꿔줌.(fetch는 안해줌) 내가 생각한 답 let shoes사본 = [...shoes] shoes변경([...shoes사본,...result.data]) .. 2021. 8. 12. [React]SASS SASS 를 설치한다. yarn add node-sass (npm install node-sass) SASS는 CSS를 좀더 프로그래밍언어 스럽가 젝성가능한 preprocessor.(css에서 변수 연산자,함수,extend,import사용가능) 브라우저는 css밖에 모르므로 sass 작성파일을 css로 컴파일 해야함. node-sass가 알아서해줌 2021. 8. 11. 이전 1 다음
