Front-end/React4 [React] Create react app 프로젝트에 절대경로 import 설정하기 결론{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"]} tsconfig.json 을 위와 같이 설정하기.최신버전 CRA 는 tsconfig.json 의 일부 설정을 자동으로 인식하고 적용함.특히 baseUrl 과 paths 설정은 추가설정 없이도 작동할 수 있음. CRA 는 웹팩과 바벨 설정을 숨기고 관리하기때문에 일반적으로 설정을 직접 수정하려면 eject 를 하거나 추가 도구를 사용해야한다. 그래서 검색해봤을때 다른 사람들은 craco 같은 도구를 사용해서 CRA 설정을 오버라이드 하는 것 같던데 .. 나는 tsconfig.json 을 위와같이 설정해줬는데 절대경로가 설정됐다. 내 CRA 버전은 5,0.1 이다. CRA 버전 확.. 2024. 7. 28. Recoil 사용 연습하기 - 2 atom 의 value를 감지하기 위해서 useRecoilValue const isDark = useRecoilValue(isDarkAtom); useRecoilValue 가 atom 을 넣으면 atom 값을 반환한다. atom 의 value set하기 위해 useSetRecoilState(Atom) 이렇게 하면 setter function 받을 수있음 const setterFn = useSetRecoilState(isDarkAtom); atom 을 받아서 atom 을 변경하는 함수를 반환 setState 처럼 사용하면 된다. const toggleDarkAtom = () => setDarkAtom((prev) => !prev); atom 이 변경되면 컴포넌트도 변경된 값으로 다시 리렌더링 된다. 2023. 4. 3. Recoil 사용 연습하기 - 1 Recoil 개념 recoiil 에서 하나의 전역 상태는 Atom 이라고 부른다. Atom 은 어느 하나의 컴포넌트에 묶여있지 않고, 모든 컴포넌트에서 접근 가능한 하나의 그래프이다. Atom 상태를 구독하여 업데이트되는 Selector 혹은 Atom 을 자식으로 점점 붙여나갈 수 있다. Recoild 도 Redux처럼 단방향 데이터 흐름을 가진다. Recoil 을 사용하면 atoms(공유상태)에서 selectors(순수함수) 를 거쳐 React 컴포넌트로 내려가는 data-flow graph 를 만들 수 있다. Atoms은 컴포넌트가 구독할 수 있는 상태의 단위이다. Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다. Atoms Atoms는 상태의 단위이며, 업데이트와 구독.. 2023. 3. 21. [React] Props 로 콜백 함수 전달하기 / 어떨때 Props로 콜백 함수를 전달해야 하는가? Props 로 콜백 함수 전달하기 개념 정리 Props 란 ? react에서 props는 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달 할 때 사용된다. (부모 -> 자식 ) CallBack Function 이란? 정의: 프로그래밍에서 콜백 또는 콜백함수는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. 이벤트는 페이지가 로드되거나 유저가 click, hover, change 등의 상호작용을 했을 때 등 그 밖의 여러가지 상황에서 발생한다. 이벤트에 반응하기 위해서 함수를 공급해야한다. 이벤트가 발생했을 때 불려 질 함수를 콜백함수라고 한다. React Data Flow data는 부모에서.. 2022. 10. 29. 이전 1 다음
