본문 바로가기

React2

[React] 컴포넌트 사용해보기 Bootstrap 추가 웹개발을 더욱 편안하게 해주는 UI 틀을 제공하는 Bootstrap을 추가해보자 1) bootstrap 다운로드 - 간단하게 npm을 이용해 bootstrap을 추가할 수 있다. npm install bootstrap 2) 사용 등록 - App.js에 아래 내용을 추가해준다. 컴포넌트 사용해보기 - App.js, Login.js, Header.js 세 가지 컴포넌트로 만들었다. 1) 컴포넌트 폴더를 생성해 파일을 구분한다. > 필수는 아니지만 파일의 분류가 직관적이기 위해 생성했다. > App.js가 있는 폴더에 컴 App.js가 있는 폴더에 컴포넌트가 있는 components 폴더를 생성했다. > 컴포넌트 이름은 대문자로 시작해야 JSX에서 잡아준다. > tmi : vue에서는 .. 2022. 4. 27.
[React] React Mac 환경설정 및 기본 개념 React란 무엇일까? React란? - 웹 프레임워크, 자바스크립트 라이브러리의 하나 - facebook에서 제공해주는 프론트엔드 라이브러리 - 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리 React의 특징 1) Data Flow : 데이터가 단방향으로만 흐른다. 2) Component : UI를 여러 컴포넌트로 쪼개서 만든다. 3) Virtual DOM : html, xml, CSS 등을 트리 구조로 인식하고,데이터를 객체로 간주하고 관리 4) Prop and State > Prop : 부모 컴포넌트->자식 컴포넌트 건네주는 데이터자식 컴포넌트에서는 값 변경 불가 > State : 컴포넌트 내부에서 선언하며 내부에서 값을 변경 가능 사용자의 상호작용으로 변하는 데이터 5) JSX :.. 2022. 4. 26.