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