본문 바로가기

FE/React14

이벤트 발생 시 특정 컴포넌트를 다른 컴포넌트로 바꾸는 방법 개인 프로젝트를 하고 있을 때였습니다. '이 버튼을 누르면 다른 페이지가 아니라 다른 컴포넌트가 보였으면 좋겠는데 어떻게 해야하지?' 다른 페이지로 이동하는 것은 React router의 useNavigate()를 사용하면 된다고 배웠는데, 컴포넌트만 교체하려면...? 난감했지만 저에겐 든든한 선생님이 있습니다. useState를 사용해서 조건에 따라 렌더링하는 방법이 있군요. 그리고 router를 사용하는 방법은 다른 페이지로 바꾸는 방법을 알려주는 것 같아요. 제가 하고싶은 것은 Category/Review/Exhibition 버튼을 눌렀을 때, 페이지를 바꾸지 않고 버튼 하단의 내용들을 교체하는거에요. 어떻게 해야하지.. 하다가 멋사 같은 팀의 멤버분께 여쭤봤는데요. 태그 바깥쪽의 내용들은 그대로 .. 2023. 5. 26.
React에서 import가 안돼요!! React를 작성하던 중, 페이지가 import되지 않는 문제가 발생하였습니다. 경로도 제대로 설정했고, 디렉토리 설정도 문제없는데 도대체 왜 안되는걸까요? 하필이면 오늘따라 chatGPT도 잘 작동하지 않아 한참을 고민했습니다. 결국 원인을 찾아냈는데요, 컴포넌트는 이름이 대문자로 시작해야 하기 때문이었습니다. React에서, 컴포넌트의 이름이 소문자로 시작하면 잘 인식되지 않을 수 있다고 하더라고요. 혹시나 싶어서 대문자로 바꿔보니 멀쩡히 잘 작동했습니다. 이 문제 때문에 두시간을 날려먹었어요.. 다음부터는 안그러면 되겠죠? 이제라도 알아서 다행이라 생각합시다 ㅎㅎ 2023. 5. 25.