react 2

[React] Props와 map()으로 리스트 렌더링하기 (key가 필요한 이유)

Props란?props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법이다.리액트에선 하나의 컴포넌트를 여러번 재사용할 수 있는데, 이때 각각 다른 데이터를 전달하기 위해 props를 사용한다.아래 이미지와 같이 부모 컴포넌트인 UserList가 user 데이터를 자식 컴포넌트에게 전달하는것과 같은 방식이다.▶ 부모 컴포넌트 UserList가 user={user}를 자식 컴포넌트 User에게 전달하여 자식 컴포넌트가 해당 데이터를 props로 사용예제코드아래 코드는 사용자 목록을 출력하는 코드로, 하나의 User 컴포넌트를 여러 데이터에 재사용하는 예제코드이다.user 배열에 사용자 정보 저장map() 함수 사용하여 배열을 하나씩 반복반복돌며 User 컴포넌트에 user 객체를 props로 전..

웹 개발 2026.07.16

[React] 리액트 기본개념 (SPA, 리액트 사용방법, 동작방식)

웹사이트나 앱을 이용하다 보면 버튼을 클릭하거나 메뉴를 이동했을 때 화면이 빠르게 변경되는것을 볼 수 있다.과거엔 페이지를 이동할때마다 서버에서 새로운 HTML을 받아 화면 전체를 새로고침했지만,최근엔 필요한 부분만 즉시 변경하여 더 빠르고 자연스러운 사용자 경험을 제공하는 React와 같은 프론트엔드 라이브러리를 많이 사용한다.React란?리액트는 사용자 인터페이스(UI)를 구성하기 위한 JavaScript 라이브러리 이다. 리액트의 가장 큰 특징은 화면을 컴포넌트(Component)라는 작은 단위로 나눠 개발한다.하나의 페이지를 Header, Main, Footer처럼 여러 컴포넌트로 분리하여 개발할 수 있고,필요한 곳에서 재사용할 수 있어 유지보수가 쉬워지는것을 말한다. 또한 실제 DOM을 직접 조..

웹 개발 2026.07.15