qwef

rafce 리액트 arrow function const export 뭐 그런건가? c가 뭐지? c가 약간 아닐 거 같긴 한데.

props를 바로 줄 수 있는데, 형제끼리 안되고 조상과 손자끼리는 다이렉트로 줄 수 있음. api 약자가 application programming interface긴 한데, 보통 보면 데이터 전달 같음. 이것도 그런 듯. 이거는 useContext라는 훅을 따로 사용해서 그걸 export해서 밖에 표류하게 해 놓음. 그러면 자손들 중에 그거 import해서 사용 가능함. export const MessageStateContext = React.createContext(); export const MessageDispatchContext = React.createContext(); 이렇게 Context를 생성해 줌 return ( ); 이렇게 자식들을 저 콘텍스트로 감싸줌. 콘텍스트.Provider로 ..

비슷한데, 일단 생성할 때 npm init vite . 이거임. 그럼 뭐 메뉴 선택하라고 나옴. 거기서 알맞은 거 선택하면 됨. 그럼 거기서 개발 시작하면 됨. 이거 장점은 뭐 그냥 개발할 때 npm run start? 여기선 npm run dev임 이거 해서 올라오는게 빠르긴 함. 기능적인 차이는 없다고 함. 개발도 진짜 거의 비슷함. 약-간씩 다른점 있기는 함. 예를 들면 import React from "react"; 솔직히 이거 js에서도 안써도 되긴 하는데, jsx에서는 저거 쓰면 그냥 에러임.

npm i react-router-dom npm i react-router 일단 이거 2개. dom은 말 그대로 document에 관한 거 사용법은, 먼저 라우터 관련은 다 BrowserRouter 라는걸로 감싸줘야 함. 뭐 어디에다 해야 한다 이런 규칙은 없고, 그냥 라우터 관련은 다 , 그러니까 모든 라우터의 최상위면 됨. Link 포함. 저 두 라이브러리의 컴포넌트들은 모두 감싸고 있어야 함. 이게 새로고침 하는 게 맞음. 근데 바뀐부분만 새로고침 하는거임. (바뀔 때 마다 Network에서 파비콘 새로 로드하는거 보면 새로고침 맞는 듯) 이제 지정하는 방법은, 이렇게. Routes로 감싸고, Route로 개개별 지정해 주면 됨. 그럼 저게 카드 레이아웃? 같은 느낌이라고 보면 됨. 저 path에 ..

그냥 const ReactFunc1 = ()=>{ return ( ) } const ReactFunc2 = ()=>{ return ( ) } export default {ReactFunc1, ReactFunc2} 이렇게 가능.

useMemo와 비슷한데, 이거는 callback을 캐싱하고 있는거임. 보통 우리가 props를 통해 콜백함수를 자식으로 내려준다. 그런데, 부모 컴포넌트가 리랜더링 되면 자식컴포넌트들도 리랜더링 된다. 그러면 자식 컴포넌트들은 매번 부모가 리랜더링 될 때마다 내부 동작을 다시 실행하게 된다. (아예 컴포넌트 자체가 처음부터 끝까지 실행 됨.) 다시, useCallback은 props에 콜백함수를 자식으로 전달해도 쓸데없이 자식컴포넌트 내에서 재생성 하지 않고, 메모리에 캐싱해 뒀다가 그걸 참조해서 사용한다. 일단은 이걸 내가 이해하기 좀 어려웠던게 뭐냐면, 나는 사실 리액트 배우면서 생명주기도 create, update 순간만 알고 있었다. 그래도 리액트를 사용하는데는 아무 제약이 없으니까. 충분했다...

이건 아예 랜더링 된 결과가 메모리에 캐싱된다. 이 랜더링 된 결과가 어떤 형식으로 들어가냐면, 왜 우리가 리액트 할 때 return( ) 하면서 가상의 dom 요소들을 사용하는데, 저기에 변수같은게 아니라 값이 채워져 있는 형식으로 그 가상 요소가 메모리에 저장된다. 여튼 메모리에 캐싱되는 데이터는 저거고, 그러면 새로 다시 function을 재 랜더링 하는 트리거는 뭐냐면, props다. 단 하나 props로 전달된 것의 값의 변화가 있을 시에만 얘가 재 랜더링을 한다. 사용 방법은 export default React.memo(컴포넌트); 그냥 이렇게 하면 된다. 딱 이게 끝이다. 이 상태로 있다가, 예를 들어 const TodoItems = ({message})=>{ return( {message..

리액트에서 update, 아니면 재랜더링 등 이런 부분에서 최적화를 하기 위한 기능들이 몇개 있는데, React.memo() useMemo() useCallback() 이것들임. memo는 말 그대로 메모, 기억해두겠다는 거임. memoization 이라고도 하는데, 메모리에 넣는다는 거임. 일종의 캐싱임. memoization 이거 자체를 캐싱이라고 보면 됨. 얘의 사용방법은 const 변수 = useMemo(()=>{return이 있는함수.},[의존성배열]) 이러면 변수에 첫번째 랜더링 했을 때 이 함수가 실행되면서 값을 저장하고 있다가, 의존성 배열에 있는 참조중 변화가 일어나면 이것이 다시 실행된다. 그 전까지는 캐싱해놨던 값을 준다. const analyzeTodo = useMemo(()=>{ ..

얘는 진짜 말 그대로 어떤 값에 대한 모든 행동(로직)들을 응축시키기 위해 만든 느낌이다. const [count, dispatch] = useReducer(reducer, 0); const [값, 상태변화하고싶을시쓸함수이름] = useReducer(실행할콜백, 초기값); 이게 저 값이라는 것에 대한 모든 상태변화를 저 실행할 콜백에서 관리하는 거다. { dispatch({ type:"INCREASE", data:1 }) }}>+ 1 이런 식으로. 저 dispatch 안에 값을 넣을 수 있다. 보통 저렇게 객체형식으로 넣는다. 이렇게 객체 형식으로 넣는 이유는, function reducer(state, action){ switch(action.type){ case "INCREASE": return st..

npm i react-router-dom npm i react-router 일단 이거 두개 깔고 이거는 장점이 원래 html에서는 a링크 클릭하면 모든 화면이 랜더링 되는데, 이거는 바뀌는 부분만 랜더링 됨.