UI 2

[React] 리액트 컴포넌트란? 함수로 만드는 UI 조각

리액트는 UI를 컴포넌트 단위로 구성한다.컴포넌트는 쉽게 말해 "화면을 구성하는 작은 조각"이다. 버튼 하나, 헤더 하나, 목록 하나도 모두 컴포넌트다.✅ 함수 컴포넌트란?가장 일반적인 방식은 "함수(function)"을 이용해서 컴포넌트를 만드는 것이다.예를 들어, 헤더 컴포넌트를 만든다면 다음과 같이 작성할 수 있다.// 함수 선언식function Header() { return 헤더 입니다}// 화살표 선언식const Header = () => { return 헤더 입니다}; 함수 선언식, 화살표 선언식 모두 기능은 동일하기 때문에 익숙한 방식으로 사용하면 된다.클래스를 이용해서 선언할 수 있지만 코드가 복잡해져서 함수 방식이 일반적으로 사용된다.✅ 함수 컴포넌트의 return 문법 - ..

Node.js/React 2025.05.05

[React] 리액트란 무엇인가?

1. 컴포넌트 기반 UIReact는 컴포넌트(Component) 단위로 화면을 구성한다.말 그대로 “화면을 이루는 구성 요소”를 하나하나 모듈처럼 나눠서 만드는 방식이다. 예시:Header.js – 상단 메뉴Main.js – 본문Footer.js – 하단 영역이렇게 컴포넌트로 나누면,중복 코드 제거유지보수 편리재사용 가능덕분에 대규모 UI를 체계적으로 관리할 수 있다.2. 선언형 프로그래밍 방식React는 UI를 “선언형(Declarative)” 방식으로 정의한다. 선언형 vs 명령형선언형(React): "무엇을 원하는지"만 명확하게 선언예: “이 버튼을 누르면 이 화면을 보여줘”명령형(JavaScript 등): "어떻게 할 것인지" 일일이 지시예: 버튼 클릭 → DOM 선택 → 속성 수정 → 재랜더..

Node.js/React 2025.05.04