React로 화면을 만들다 보면 결국 한 번은 API 연동에서 막히게 됩니다. 목록 데이터를 가져와서 화면에 뿌리는 GET 요청도 필요하고, 사용자가 입력한 값을 서버로 보내는 POST 요청도 필요하기 때문입니다. 그런데 처음에는 어디서 GET을 써야 하는지, POST는 어떻게 보내는지, 성공 후 화면은 어떻게 다시 갱신해야 하는지 흐름이 잘 안 잡히는 경우가 많습니다.입문 예제에서는 fetch를 많이 쓰지만, 실제 실무에서는 Axios를 더 자주 선택하는 경우가 많습니다. 기본 URL 관리, 요청/응답 공통 처리, 인터셉터, 타임아웃 설정 같은 부분을 한 곳에서 정리하기 더 편하기 때문입니다.그래서 이 글에서는 단순히 "데이터를 받아온다" 수준에서 끝내지 않고, React에서 Axios로 GET 요청과..
React를 공부할 때 가장 먼저 배우는 Hook이 보통 useState입니다. 그런데 문법은 짧아 보여도 막상 직접 쓰기 시작하면 “값은 왜 바로 안 바뀌지?”, “배열은 어떻게 추가하지?”, “객체는 왜 일부만 바꿨는데 이상하게 동작하지?” 같은 질문이 금방 생깁니다.특히 입문 단계에서는 아래 포인트에서 많이 헷갈립니다.useState는 정확히 무엇을 하는가?일반 변수와 state는 무엇이 다른가?숫자/문자열은 어떻게 바꾸고, 배열·객체는 어떻게 업데이트하는가?왜 기존 값을 직접 수정하면 안 되는가?이번 글에서는 React 입문자가 가장 자주 찾는 useState 사용법 정리를 기준으로, 상태 관리 개념 → 값 변경 → 배열 업데이트 → 객체 업데이트 → 자주 하는 실수까지 한 번에 정리하겠습니다. ..
React를 공부하다 보면 useState 다음으로 가장 많이 막히는 Hook이 바로 useEffect입니다. 문법 자체는 짧아 보이는데, 막상 써보면 “이게 왜 두 번 실행되지?”, “의존성 배열을 비우면 뭐가 달라지지?”, “API 호출은 어디에 넣어야 하지?” 같은 질문이 한꺼번에 생깁니다.특히 입문자 입장에서는 아래 포인트에서 많이 헷갈립니다.useEffect는 정확히 언제 실행되는가?의존성 배열은 왜 필요한가?빈 배열 []은 무슨 의미인가?무한 렌더링은 왜 생기고 어떻게 막아야 하는가?이번 글에서는 React 입문자가 가장 자주 찾는 useEffect 사용법 정리를 기준으로, 실행 시점 → 의존성 배열 → API 호출 → cleanup → 자주 하는 실수까지 한 번에 정리하겠습니다.핵심 요약us..
React 프로젝트를 어느 정도 만들고 나면 그다음부터 막히는 건 코드보다 배포입니다. 로컬에서는 잘 돌아가는데, 막상 리눅스 서버에 올리려 하면 build 파일은 어디에 올려야 하는지, 정적 파일은 어떻게 서비스해야 하는지, 새로고침했을 때 404는 왜 나는지 같은 문제가 한꺼번에 생기기 때문입니다.처음 배포를 할 때는 “그냥 build 폴더만 업로드하면 끝나는 거 아닌가?” 싶지만, 실제로는 그 뒤에 한 번 더 봐야 할 부분이 있습니다. 서버에 파일을 어디에 둘지, 웹서버가 어느 경로를 바라보게 할지, React Router를 쓰고 있다면 새로고침 이슈는 어떻게 처리할지까지 같이 맞춰야 실제 서비스처럼 보입니다.그래서 이 글에서는 어렵게 이론부터 길게 설명하지 않고, React 프로젝트를 build하..
React로 화면을 만들기 시작하면 금방 부딪히는 주제가 바로 페이지 이동입니다.처음에는 컴포넌트 하나만 띄우면 되지만, 조금만 기능이 늘어나도 아래처럼 궁금해집니다.홈 화면에서 상세 페이지로 어떻게 이동하는가?URL이 바뀌어도 새로고침 없이 화면이 바뀌는 이유는 무엇인가?React에서 페이지 이동은 a 태그로 하면 안 되는가?React Router는 어떻게 설치하고 적용하는가?이번 글에서는 React 입문자가 가장 많이 찾는 React Router 사용법을 기준으로, 기본 라우팅 설정 → 페이지 이동 → Link 사용법 → useNavigate 활용까지 한 번에 정리하겠습니다.핵심만 먼저 보면React Router는 React 앱에서 URL에 따라 다른 화면을 보여주는 라우팅 라이브러리입니다.Link는..