FE/React 썸네일형 리스트형 [React] 리액트 부트스트랩(react-bootstrap) 적용하기 📌 react-bootstrap 이란? • react 에서 Bootstrap5 을 사용 가능하도록 개발한 라이브러리입니다. • 각종 레이아웃, 버튼, 입력창, 테이블 등을 미리 디자인을 정의해두어 React에서 컴포넌트를 불러 사용가능합니다. • 프로젝트 내 따로 bootstrap.js 파일을 둘 필요가 없고 react-bootstrap 라이브러리만 설치하여 사용 가능합니다. 📌 Bootstrap 라이브러리 설치하기 • react Bootstrap 문서에서 참고해 npm에서 react-bootstrap 라이브러리를 설치합니다. • npm install 은 yarn add 와 동일하기 때문에, yarn은 yarn add react-bootstrap bootstrap 으로 설치하시면 됩니다. npm inst.. 더보기 [React] State란? 변경되는 동적인 값 📌 State 란 무엇인가? - state란 리액트에서 이벤트에 의해 변경되는 동적인 값입니다. - 버튼을 클릭하는 onClick 이벤트, input 입력으로 인해 발생하는 onChange 이벤트에 의해 입력값이 변경된 경우 사용됩니다. - props는 부모 컴포넌트가 설정하는 값이며 읽기 전용이지만, state는 하위 컴포넌트도 데이터를 변경할 수 있습니다. - 함수형 컴포넌트는 'useState'라는 Hook 을 사용하여 state를 다룰 수 있습니다. 📌 State 사용하기 : useState 함수형(function) 컴포넌트에서 { useState } Hooks를 활용해 state를 사용해보겠습니다. useState란 리액트의 기본 Hook 중 하나로, 컴포넌트에서 state를 추가할 때 사용합니.. 더보기 [React] Props란? 컴포넌트에 데이터 전달하는 프로퍼티 📌 Props 란 무엇인가 - props(property)란 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성입니다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖습니다. - 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능합니다. 📌 Props 사용하기 : 단방향 데이터 흐름 props 를 사용하려면 두 단계가 필요합니다. 1) 상위 컴포넌트에서 Props를 지정하고, 2) 하위 컴포넌트에서 받은 Props값을 렌더링해야 합니다. 이 때 상위 컴포넌트에서 하위 컴포넌트로 프로퍼티가 전달되는데 이것이 "단방향 데이터 흐름" 입니다. 1) 상위 컴포넌트에서 Props 지정하여 넘기기 - 아래 코드에서 App 컴포넌트가 MyComponent 컴포넌.. 더보기 [React] React 컴포넌트란? React 앱을 구성하는 요소 📌 컴포넌트 (Component)란? 리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다. 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC 의 뷰를 독립적으로 구성하여 재사용할 수 있습니다. 리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있습니다. • 컴포넌트 구성 요소 1) property(props) - 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터입니다. 프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다. 2) state - 컴포넌트의 상태를 저장하고 수정 가능한 데이터입니다. .. 더보기 [React] JSX 정의 및 문법 📌 JSX (Javascript XML)란? • Javascript 에 XML을 추가해 엘리먼트를 생성하는 문법 리액트에서 'JSX' 라는 특별한 문법으로 엘리먼트를 만들어 사용자에게 UI가 실제로 어떻게 표현될 것인지 나타냅니다. JSX는 Javascript에 XML을 추가한 Javascript를 확장한 문법으로, 공식적인 자바 스크립트 문법은 아닙니다. 하지만 가독성이 높고 이해하기 쉬운, 리액트만의 특별한 스크립트 문법입니다. 아래는 리액트에서 App.js 에 JSX로 "Hello! React"를 화면에 나타내는 코드입니다. function App() { const HelloBlock = Hello React!; return( {HelloBlock} ); } 여기서 "Hello! React" 가 마.. 더보기 [React] React 개념 📌 리액트(React)란? • 오로지 뷰(View)에 집중해 개발하는 라이브러리 리액트는 SPA방식에서 많이 사용되는 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위해 사용되는 라이브러리입니다. 기업에서 흔하게 사용되는 프레임워크는 MVC(Model-View-Controller) 아키텍처 기반 프레임워크입니다. MVC방식은 데이터가 변경될 때마다 컨트롤러/모델에서 데이터를 변경하고, 변경된 사항을 뷰에 렌더링하여 화면에 보여줍니다. 만약 프론트단에서 처리해야 할 이벤트가 많은 경우, 서버 로직이 복잡할 경우는 어떨까요? 사용자에게 변경된 부분을 보여주는 데 많은 시간이 소요됩니다. 이를 해결하기 위해 페이스북은 오직 "뷰"에 집중한 라이브러리인 리액트를 개발했습니다. • 컴포넌트(Componen.. 더보기 이전 1 다음
