JSX 완전 정복: 표현식과 조건부 렌더링 패턴
웹 개발을 시작하면 리액트(React)를 가장 먼저 접하게 되고, 자연스럽게 JSX라는 독특한 코드를 만나게 됩니다. 겉보기에는 HTML처럼 생겼지만 자바스크립트의 강력한 기능을 그대로 품고 있는 이 기술은 현대 프론트엔드 개발의 핵심 축입니다. JS...
전체 글
React 함수형 컴포넌트와 props 완전 이해
웹 페이지를 만들 때 같은 디자인의 버튼이나 카드를 반복해서 만들어 본 적이 있을 것이다. 코드를 복사해서 붙여넣다 보면 유지보수가 어려워지고 코드는 금방 스파게티처럼 꼬이고 만다. 이러한 문제를 해결하기 위해 등장한 개념이 바로 React 컴포넌트다...
React useState로 상태 관리 완전 정복
리액트(React)를 활용해 동적인 웹 애플리케이션을 만들 때 가장 처음 마주하는 벽이 있습니다. 바로 사용자의 클릭이나 입력에 따라 화면이 실시간으로 변하게 만드는 일입니다. 자바스크립트에서는 변수의 값을 바꾸고 화면의 DOM을 직접 수정했지만, 리...
useEffect 동작 원리와 의존성 배열 이해하기
리액트(React)로 웹 서비스를 개발할 때 가장 자주 마주치며, 동시에 초보 개발자를 가장 많이 혼란에 빠뜨리는 개념 중 하나가 바로 useEffect입니다. 화면이 그려지는 과정과 상관없이 외부 데이터를 가져오거나 브라우저 타이머를 설정하는 등, ...
React 기초 프로젝트: Todo List 완전 구현
React Todo List의 구조와 상태(State) 설계하기 웹 개발 공부를 시작할 때 누구나 한 번은 거쳐 가는 고전적인 프로젝트가 있습니다. 바로 투두 리스트(Todo List) 만들기입니다. 단순해 보이지만 React Todo List 는 컴...
React 개발자를 위한 TypeScript 기초
리액트(React)를 사용해 컴포넌트를 설계하다 보면, 어느 순간 "이 Props에는 어떤 값이 들어와야 하더라?" 하는 의문이 생기곤 합니다. 자바스크립트는 매우 유연하지만, 이 유연함이 때로는 런타임 에러라는 부메랑이 되어 돌아옵...