Frontend/React&RN (14) 썸네일형 리스트형 [next.js] redux devtools 세팅법 redux devtools npm i redux-devtools-extension 예전이랑 세팅법이 약간 달라졌는데, 요즘 세팅법이 더 간결해졌다. react에서 redux devtools 사용하기 next.js 와 미들웨어 없이 오직 react.js만 사용할 때 세팅하는 순서이다. store를 생성할때 reducer와 composeWithDevTools()를 같이 넣어준다. Provider에 바로 store를 주입하면 끝이라 되게 간단하다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { Provider } from 'react-re.. [Styled Components]syntex Styled Components npm i styled-components 단점 작성할때 css를 줄 태그는 다 컴포넌트로 만들어야 한다는 점이 가독성을 떨어뜨린다고 생각 css 수정할때마다 해당하는 컴포넌트 파일 위치 찾아야 하는 번거로움 존재 장점 className을 사용하지 않아 외부에 css파일로 빼서 작업했을때 className 중복되서 생기는 문제를 해결함 scss 설치 없이 scss 문법을 사용 가능 자바스크립트식 CSS 문법이 아닌 기존 CSS 문법(단축, 가운데 - 사용) 모두 사용 가능 자바스크립트로 처리하기 때문에 상태처리 하는 css 역할로 매우 우수 react-native에서도 적용되기에 웹과 앱을 둘다 만들어야 한다면 css를 거의 그대로 사용 가능 결론 레이아웃과 scss로 만.. [react-router-dom]BrowserRouter, HashRouter 설치 npm i react-router react-router-dom 라우터 적용 라우터를 사용하기 위해선 최상위 컴포넌트를 묶고 시작해야 한다 import React from 'react'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; const Root = () => { return ( ); }; export default Root;라우터1. BrowserRouter Link 컴포넌트 to속성에 이동할 경로 기술 Route 컴포넌트 path속성을 Link의 to속성과 매핑 component에 컴포넌트 경로 기술 새로고침 하면 경로 못찾아서 에러남 라우터2. HashRou.. [styled-components] syntax Styled Components npm i styled-components 외부 css파일로 빼서 작업하지 않기에 className 중복 문제 해결 scss 설치 없이 scss 문법 사용 가능 기존방식 컴포넌트에 props로 상태값을 전달하고 상태값에 따라 className을 다르게 붙이는 방식 class App extends Component { render() { return ( ); } } const Button = ({ danger }) => ( Hello ); Styled Components 기본문법 const 컴포넌트명 = styled.태그명`...css ` 전역에 스타일 줄때는 createGlobalStyle 모듈 사용 기존 전역 모듈 injectGlobal 없어짐 https://www.st.. [Custom Hooks] useInput, useFetch 커스텀 훅으로 자주 사용하는 것들 모듈화(Util 파일로 만들어서 사용하기) useInput, useFetch 만들어 쓰기 const App = () => { const nameHook = useInput(""); const { payload, loading, error } = useFetch("http://aws.random.cat/meow"); // console.log(nameHook) return ( use Hooks {loading && loading your cat} {!loading && error && {error}} {!loading && payload && } ); }; value와 onChange 바인딩된 input을 Hook으로 만들기 export function useInput(d.. [총정리] useEffect(), useMemo(), useCallback() Hook 유의사항 Hook은 순서가 매우 중요 최상위 바깥에 선언해서 실행순서가 일정하게 하는 것이 중요 if문에 넣는것 금지 -> if(조건) useState(값) hook안에 hook을 쓰는것 금지 -> useState안에 useState를 쓰는 등 반복문은 상관없음 -> 비추천 hook과 라이플 사이클 // componentDidMount useEffect(() => { // 실행 할 로직 }, []); // componentDidUpdate const mounted = useRef(false); useEffect(() => { if(!mounted.current) mounted.current = true; // 실행 할 로직 }, [/*변경되는값*/]); // componentDidMount, c.. 이전 1 2 다음
