React : 컴포넌트(Component)

컴포넌트(Component)리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트(Component)' 라는 단위를 사용한다.컴포넌트는 리액트의 핵심 단위로, 독립적이고 재사용 가능한 UI 조각이다.즉, 리액트에서 애플리케이션을 이루는 가장 작은 조각이라고 할 수 있겠다.리액트에서는 이러한 작고 독립된 코드의 파편을들을 조합하여 복잡한 UI를 구축할 수 있다.리액트 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 2가지로 나뉠 수 있으며,현재는 Hook의 등장으로 클래스형 컴포넌트보다 함수형 컴포넌트의 사용 빈도가 월등히 많다.✨ 하지만 하이테크한 로직이 있을 경우 클래스형 컴포넌트를 사용해주는 편이 더 좋아서 클래스형 컴포넌트를 잊어서는 안되겠다.컴포넌트의 구성 요소1. props- props는 부모 컴포넌..

• format_list_bulleted Front/React
• · 2024. 11. 24.
• textsms

React : props and state

propsprops(properties)란 컴포넌트가 외부에서 받는 데이터를 의미한다.즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.props는 읽기 전용 데이터이므로 전달받은 자식 컴포넌트 내부에서 직접 수정할 수 없다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능한 대신 props를 전달해준 부모 컴포넌트만 props를 변경하여 자식 컴포넌트가 변경된 데이터를 받게 된다.💡 props란?"props는 부모 - 자식 컴포넌트 간의 데이터를 전달하는데 사용되며, 상속받은 자식 컴포넌트 내부에서는 값이 변경 불가능한 readonly 데이터이다."props 예제App.js를 부모 컴포넌트라고 가정다른 컴포넌트(class type, function type)에 props로 데이..

• format_list_bulleted Front/React
• · 2024. 11. 24.
• textsms

React : JSX(JavaScript XML)

JSX(JavaScript XML)이전 글에서 App.js 자바스크립트 파일 내에 코드를 변경하여 브라우저 화면(HTML)이 수정된 것을 확인할 수 있었다.원래 HTML의 변경은 .html 파일에 적어야 하지만 그런데 .js파일에 코드를 수정해도 HTML이 변경되는 이유가 뭘까?바로 App.js, return 내부의 코드들은 HTML코드가 아니기 때문이다. 바로 JSX 이다.JSX는 자바스크립트를 확장한 언어로 자바스크립트 파일 내에서 HTML코드를 사용할 수 있게 해준다.즉, 리액트는 JSX를 사용하여 HTML과 JavaScript를 결합한다.JSX는 HTML 코드와 비슷하기 때문에 일반 자바스크립트만 사용한 코드보다 더 익숙하고 간결하며 가독성이 좋다.추가로 JSX에서는 HTML 태그들과 똑같이 사용..

• format_list_bulleted Front/React
• · 2024. 11. 17.
• textsms

React : 개요 및 개발환경 세팅

리액트(React)리액트는 사용자 인터페이스(UI)를 구축하기 위해 페이스북(메타)에서 개발한 자바스크립트 라이브러리이다.기존 HTML에서 사용자들을 가장 신경쓰이게 하는 점은 페이지 이동이나 새로고침 같은 화면 깜박임이다. 그래서 싱글 페이지 애플리케이션(SPA) 구현이 웹 개발에 있어서 가장 중요한 부분 중 하나이다. 이러한 SPA 구현 뿐만 아니라 컴포넌트 사용으로 재사용성 향상, 데이터가 HTML에 바로 렌더링되어 자동 반영 기능을 가지고 있는 React, Angular, Svelte, Vue, Preact 와 같이 유사한 기능을 제공하는 라이브러리가 많지만 그 중 전세계적으로 리액트를 가장 많이 사용하는데 이 점이 리액트가 가지는 큰 장점이다.리액트의 사용 사례로 대규모 데이터 기반 애플리케이션..

• format_list_bulleted Front/React
• · 2024. 11. 17.
• textsms