React에서 전역 상태 관리를 할 때 코드 최적화와 설정 차이로 인한 문제를 해결하기 위해 useState를 사용해야 하는 이유에 대해 알아보겠습니다. 저는 주스탠드를 사용하여 전역 상태 관리를 구현하고 있습니다. 일반 변수를 사용하여 userType을 저장하여 사용했고, 로컬 환경에서는 별 다른 문제가 발생하지않았습니다. 하지만 AWS 빌드 후에 userType이 undefined가 되는 문제가 발생했습니다. ////기존 코드 import { useUserStore } from "src/store/adviceStore"; const { user, fetchUserData } = useUserStore(); //가져온 fetchUserData를 userType변수에 저장 const userType = ..

앞 포스팅에서는 map() 함수를 할때 return문의 유무에 대해서 알아보았습니다. 중괄호를 사용하면서 return 키워드를 생략하는 경우, 함수는 값을 반환하지 않고 기본적으로 undefined를 반환한다고 했습니다. 이 경우는 해당 함수에서 값을 반환하는 것이 중요하지 않을 때 유용합니다. 예를들어 다음과 같은 상황에서는 return문을 생략하고 기본적으로 undefined를 반환하는 것이 적절합니다. //예제1 function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { setCount(count + 1); }, 1000); }, []); return ( {count} ); }..

리액트에서 JSX 코드의 반복 요소를 수정할 때, map()함수를 자주 사용합니다. map() 함수를 사용하여 반복되는 JSX요소를 반환하는 경우가 많이 발생합니다. return 키워드를 사용하여 반환하는 방식과, 간결한 화살표 함수의 단축 구문을 사용하는 방식 두 가지가 있습니다. 결과적으로는 동일한 결과물입니다. 하지만 조금 다른 차이점이 있습니다. 1. return을 사용할때 - return 키워드를 사용하는 경우, 명시적으로 return 문을 사용하여 생성된 각 JSX 요소를 새 배열에 저장하고, 이 배열은 나중에 렌더링될 수 있도록 합니다. function NumberList({ numbers }) { return ( {numbers.map((number) => { return {number};..

리액트에서는 useEffect 훅을 활용하여 상태 값이 변화할 때마다 특정한 동작을 수행할 수 있습니다. 이번 포스트에서는 useEffect 훅을 사용하여 상태 값이 변할 때마다 console.log를 통해 값의 변화를 확인하는 방법에 대해 알아보겠습니다. 리액트에서 useState 훅을 사용하여 상태 값을 변경할 때마다 useEffect 훅으로 값을 확인하고 싶을 때가 있습니다. 그런데 의존성 배열을 비워놓으면 콘솔에 값이 출력되지 않습니다. 그렇다면, 어떻게 의존성 배열을 설정하면 좋을까요? 의존성 배열에 상태 값 자체를 넣는 것은 무한 렌더링을 발생시키므로 올바르지 않습니다. 대신, useEffect 함수 내부에서 상태 값을 참조하도록 코드를 작성해야 합니다. 예시 코드📌 const [count, ..

최근에 Amplify를 사용하여 프론트엔드 배포를 하는도중에, 폰트가 적용되지 않는 문제가 발생하였다. 웹 폰트 방식으로 태그를 사용하거나 @font-face 방식으로 직접 폰트 파일을 임포트해 보았으나, 배포 후에도 폰트가 적용되지 않는 문제가 지속되었다. 해결방법을 블로그에 기록해 보려 한다. 1. 빌드해야하는 apps를 선택 2. 앱 세팅에서 rewrites and redirects를 클릭한다. 3. 오른쪽에 edit 버튼 클릭 4. add rule을 눌러서 추가한뒤 아래 내용을 복사해서 넣어준다. 5. 타켓 어드레스에 /index.html을 적어준다음 save를 눌러주고 다시 빌드를 시도해보면 된다.