REACT12 JSX 소개: React에서 UI를 효과적으로 구성하는 법 JSX는 JavaScript XML의 약자로, React를 사용하여 UI 컴포넌트를 작성하기 위한 문법 확장이다. JSX는 JavaScript 와 HTML 의 조합처럼 보이는 문법을 사용하여, React 엘리먼트를 생성하는데 사용된다. (사용자 인터페이스를 보다 직관적이고 효율적으로 작성할 수 있도록 도와주는, react 개발의 핵심 중 하나) 특징 >> JSX는 HTML 태그를 JavaSCript 코드 내에서 사용할 수 있도록 해준다. (개발자가 UI 컴포넌트를 더 직관적으로 작성하고 이해할 수 있게 해준다) 디자인과 코드 사이의 간극을 줄여주며, UI 개발 속도와 효율성을 높여준다.(개발 효율성 증가) 컴포넌트 기반 구조에서 JSX를 사용하면 코드의 유지 보수가 용이해진다. JSX는 브라우저에서 직접.. 2024. 3. 23. React State 이해하기: 데이터 흐름과 UI 동기화 React에서 State는 컴포넌트의 상태를 추적하고 관리하는 데 사용되는 데이터이다. 컴포넌트의 렌더잉에 영향을 주는 정보로, 사용자의 상호작용이나 시간의 경과에 따라 변경될 수 있다. State의 변경은 React가 컴포넌트를 다시 렌더링하도록 하여 사용자 인터페이스가 최신 상태로 유지된다. 개발할 때 State 관리를 통해 UI의 일관성을 높이고 데이터 흐름을 관리할 수 있다 State의 특징 >> State는 컴포넌트 내부에서 변경될 수 있다. 사용자의 상호작용 또는 시스템 이벤트에 반응하여 UI를 업데이하기 위해 필요하다. 각 React 컴포넌트는 자신만의 State를 가지며, 다른 컴포넌트의 State에 직접적으로 접근할 수 없다. State의 업데이트는 비동기적으로 일어날 수 있다. Reac.. 2024. 3. 23. React Props: 컴포넌트 간 데이터 전달 Props(속성)는 "properties"의 줄임말로, React에서 컴포넌트 간에 데이터를 전달하는 방법이다. Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며, 이를 통해 다양한 컴포넌트에서 재사용 가능하고 유지 관리가 용이한 코드를 작성할 수 있다. (Props는 컴포넌트의 입력으로 생각할 수 있으며, 주로 UI를 렌더링하는 데 필요한 데이터를 제공한다) Props의 기본 특성 >> 읽기 전용: Props는 자식 컴포넌트 내에서 변경될 수 없다. React의 철학에 따라 데이터는 위에서 아래로(부모에서 자식으로)만 흐른다. (예측 가능한 데이터 흐름을 만들어 어플리케이션의 동작을 이해하고 디버깅하기 쉽게 만든다) 컴포넌트 재사용성: 동일한 컴포넌트를 다른 Props와 함께 .. 2024. 3. 23. 리액트 컴포넌트 소개 리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리이다. 리액트에서 핵심적인 개념 중 하나가 바로 컴포넌트(Component)다. 컴포넌트는 UI의 독립적이고 재사용 가능한 부분으로, 각 컴포넌트는 자체적으로 동작하며, 복잡한 UI를 구성하는 데에 사용된다. 리액트 컴포넌트는 웹 애플리케이션의 구조를 효율적으로 관리하고, 빠르고 반응적인 사용자 경험을 제공하는 역할을 한다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 함수형 컴포넌트 >> React 16.8부터 Hooks를 사용하여 상태(state) 및 다른 REact 기능들을 사용할 수 있다. function Welcome(props) { return Hello, {props.name}; } 클래스형 컴포넌트 >> 상태(st.. 2024. 3. 23. 이전 1 2 3 다음
