리액트(React) 기초가 막막하신가요? 컴포넌트, Props와 State, 그리고 가상돔(Virtual DOM)까지 리액트의 핵심 철학을 레고 블록 비유로 쉽고 완벽하게 정리해 드립니다! 복잡한 웹사이트를 마치 디지털 레고 블록처럼 조립하는 마법! 기존 명령형 방식의 한계(스파게티 코드)를 극복하고 등장한 리액트의 선언형 방식과 단방향 데이터 흐름을 알아봅니다. 프론트엔드 개발 입문자라면 무조건 알아야 할 리액트의 모든 것, 영상으로 확인해 보세요.
누구나패스
강사
평균 평점
짧지만 핵심만 콕콕 집어주셔서 출퇴근 시간에 완강했어요!
비전공자인데 React가 뭔지 드디어 알게 됐어요. 다음 심화 강의도 기대됩니다.
useEffect 의존성 배열 정리해드릴게요! ① 빈 배열 []: 컴포넌트 최초 렌더링 1회만 실행 (API 호출, 이벤트 등록 등에 사용) ② 배열 없음: 매 렌더링마다 실행 (거의 쓰지 않음, 무한루프 위험) ③ [변수]: 해당 변수가 변경될 때마다 실행. 핵심은 "useEffect 안에서 사용하는 외부 변수는 모두 의존성 배열에 넣어라"는 ESLint 규칙을 따르시는 겁니다. react-hooks/exhaustive-deps 린트 규칙을 켜두시면 빠뜨리는 일이 없어요!
— 누구나패스 강사
좋은 질문입니다! 실무에서는 "하나의 컴포넌트는 하나의 책임"을 기준으로 나눕니다. 예를 들어 Header, SearchBar, NavMenu처럼 독립적으로 재사용 가능한 단위로 분리하세요. 레고 블록 하나가 한 가지 역할만 하는 것과 같은 원리입니다.
— 누구나패스 강사
무료
레고 블록 비유가 진짜 찰떡이에요. 컴포넌트 개념이 한번에 이해됐습니다.
아주 핵심적인 질문이에요! 간단한 판단 기준을 드리면: 데이터가 "부모에서 자식으로 흘러내려가는 것"이면 Props, "컴포넌트 자체가 변경하고 관리하는 것"이면 State입니다. 예를 들어 버튼 텍스트는 Props(부모가 정해줌), 버튼 클릭 여부는 State(버튼 스스로 관리)예요. 처음엔 "이 데이터를 누가 소유하는가?"라고 물어보시면 판단하기 쉬워집니다. 불변 데이터 → Props, 변하는 데이터 → State라는 공식도 도움이 돼요!
— 누구나패스 강사
