전체 글75 useReducer 다시 찾아볼것 useReducer 상태관리의 크기가 커지고 관리방식이 복잡해 질때 사용 useState의 대체 const [data, dispatch] = useReducer(diaryReducer, []) useReducer 의 배열의 비구조화 할당에 들어오는 첫번째 인자는 state의 값, 두번째 인자로는 무조건 dispatch를 사용해야한다. -> const [data, dispatch] useReducer 의 인자로는 상태변화를 처리하는 함수를 넣고 두번재로는 state의 초기값을 넣는다. -> useReducer(diartReducer, []) const reducer = (state, action) => { switch ( action.type ) { case "INIT": { return action.da.. 2024. 2. 2. react.memo ? 왜 필요하죠? react.memo 함수형 컴포넌트를 메모이제이션 해서 이전에 렌더링한 결과를 재사용 하여 불필요한 렌더링을 방지한다, 같은 props로 렌더링 될 때 이전에 렌더링한 결과를 재사용하여 컴포넌트를 다시 렌더링하지 않는다. App 컴포넌트에 있는 count state가 업데이트가 되면 자식컴포넌트인 countview도 업데이트 된다. -> React는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 같이 렌더링 되기 때문 TextCheck 컴포넌트는 리렌더링 될 필요가 없지만 App컴포넌트가 count state를 업데이트 시켜주니 같이 리렌더링! 이럴 경우 연산의 낭비가 발생한다, 굳이 자신과 관련없는 업데이트로 인해서 성능상의 문제가 생길 수 있다. 그렇다면 업데이트 조건을 걸어서 count가 변경될 때만.. 2024. 2. 1. 프로젝트로 느낀 window.location.href와 origin의 차이 프로젝트를 진행하던 중 링크공유 및 카카오 공유하기 기능을 맡게 되었다. 링크 공유하기는 window.location.href를 사용해서 현재 url을 복사하면 된다는 아주 간단한 생각을 했다. href를 사용하면 현재 페이지의 전체 URL을 문자열로 반환하며 웹브라우저의 주소 표시줄에 표시되는 것과 동일한 주소가 나온다. const ShareBtn = () => { const [isToast, setIsToast] = useState(false) const url = window.location.href const shareToFacebook = () => { const sharedLink = encodeURIComponent(url) window.open(`http://www.facebook.com/.. 2024. 1. 30. React children 컴포넌트의 자식들을 값으로 받는 Prop function Button({text}){ return {text} } export default Button; button 태그에 {text}라는 prop를 전달하는 컴포넌트를 만듦 import Button from './Button'; function App (){ return ( ) } export default App 를 출력할 수 있다. 단순히 보여주는 값을 다룰 때는 prop를 만드는 것 보다는 children을 활용하는 것이 직관적으로 도움이 된다. function Button({children}){ return {children} } export default Button; Button 컴포넌트에 prop을 childern으로 변경해주고 impor.. 2024. 1. 18. 이전 1 ··· 8 9 10 11 12 13 14 ··· 19 다음
