React를 공부할 때 가장 먼저 배우는 Hook이 보통 useState입니다. 그런데 문법은 짧아 보여도 막상 직접 쓰기 시작하면 “값은 왜 바로 안 바뀌지?”, “배열은 어떻게 추가하지?”, “객체는 왜 일부만 바꿨는데 이상하게 동작하지?” 같은 질문이 금방 생깁니다.특히 입문 단계에서는 아래 포인트에서 많이 헷갈립니다.useState는 정확히 무엇을 하는가?일반 변수와 state는 무엇이 다른가?숫자/문자열은 어떻게 바꾸고, 배열·객체는 어떻게 업데이트하는가?왜 기존 값을 직접 수정하면 안 되는가?이번 글에서는 React 입문자가 가장 자주 찾는 useState 사용법 정리를 기준으로, 상태 관리 개념 → 값 변경 → 배열 업데이트 → 객체 업데이트 → 자주 하는 실수까지 한 번에 정리하겠습니다. ..
React를 공부하다 보면 useState 다음으로 가장 많이 막히는 Hook이 바로 useEffect입니다. 문법 자체는 짧아 보이는데, 막상 써보면 “이게 왜 두 번 실행되지?”, “의존성 배열을 비우면 뭐가 달라지지?”, “API 호출은 어디에 넣어야 하지?” 같은 질문이 한꺼번에 생깁니다.특히 입문자 입장에서는 아래 포인트에서 많이 헷갈립니다.useEffect는 정확히 언제 실행되는가?의존성 배열은 왜 필요한가?빈 배열 []은 무슨 의미인가?무한 렌더링은 왜 생기고 어떻게 막아야 하는가?이번 글에서는 React 입문자가 가장 자주 찾는 useEffect 사용법 정리를 기준으로, 실행 시점 → 의존성 배열 → API 호출 → cleanup → 자주 하는 실수까지 한 번에 정리하겠습니다.핵심 요약us..
React로 화면을 만들기 시작하면 금방 부딪히는 주제가 바로 페이지 이동입니다.처음에는 컴포넌트 하나만 띄우면 되지만, 조금만 기능이 늘어나도 아래처럼 궁금해집니다.홈 화면에서 상세 페이지로 어떻게 이동하는가?URL이 바뀌어도 새로고침 없이 화면이 바뀌는 이유는 무엇인가?React에서 페이지 이동은 a 태그로 하면 안 되는가?React Router는 어떻게 설치하고 적용하는가?이번 글에서는 React 입문자가 가장 많이 찾는 React Router 사용법을 기준으로, 기본 라우팅 설정 → 페이지 이동 → Link 사용법 → useNavigate 활용까지 한 번에 정리하겠습니다.핵심만 먼저 보면React Router는 React 앱에서 URL에 따라 다른 화면을 보여주는 라우팅 라이브러리입니다.Link는..
React를 공부하기 시작하면 가장 먼저 부딪히는 문법이 바로 JSX입니다.처음 보면 HTML처럼 보이는데 JavaScript 안에 들어가 있고, 중괄호로 값을 넣기도 하고, if문은 그대로 안 들어가고, 배열을 map()으로 돌려 화면에 뿌리는 방식도 낯설게 느껴집니다.특히 입문 단계에서는 아래 포인트에서 많이 막힙니다.JSX는 정확히 무엇인가?HTML과 뭐가 다르고 왜 중괄호를 쓰는가?조건부 렌더링은 어떻게 해야 하는가?리스트 출력할 때 왜 map()과 key가 필요한가?이번 글에서는 React 입문자가 꼭 알아야 하는 JSX 기본 문법, 조건부 렌더링, 리스트 출력을 한 번에 정리하겠습니다. 단순 문법만 나열하지 않고, 왜 그렇게 쓰는지, 어디서 자주 헷갈리는지까지 같이 보겠습니다.핵심만 먼저 보면..
React를 처음 시작하면 프로젝트를 만든 직후부터 바로 헷갈리는 부분이 있습니다. 바로 폴더 구조입니다.특히 입문자 입장에서는 아래 질문이 자주 나옵니다.`src` 폴더에는 무엇을 넣는가?`public` 폴더는 언제 사용하는가?`components` 폴더는 왜 따로 나누는가?파일을 아무 데나 두면 안 되는 이유는 무엇인가?이번 글에서는 React 입문자가 가장 먼저 이해해야 하는 src, public, components 폴더 역할을 한 번에 정리해보겠습니다. 단순히 폴더 이름만 설명하는 것이 아니라, 왜 그렇게 나누는지, 실제로 어떻게 관리하는지까지 함께 보겠습니다.핵심만 먼저 보면src는 실제 React 코드가 들어가는 핵심 폴더입니다.public은 정적 파일을 그대로 제공할 때 사용하는 영역입니다..