본문 바로가기
반응형

리액트 (React)/React 기초5

Component - 클래스형 & state 넘겨주기 클래스형 App.js 기본 코드 // App component를 class형으로! import React from 'react'; class App extends React.Component { constructor(props){ super(props); this.state = {} } componentDidMount(){ } render(){ return ( ); } } export default App; 클래스형 BucketList App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; import BucketList from './BucketList'; // 클래스형 컴포넌트는 이렇게 생겼습니다! cla.. 2021. 8. 30.
Component - 함수형 함수형 Component 는 두가지 형태로 사용할 수 있다. BucketList.js import React from 'react'; function Bucketlist(props){ return ( 버킷 리스트 ); } const BucketList = (props) => { return ( 버킷 리스트 ); } - return : 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환 - =>가 들어간 함수를 화살표 함수라고 불러요. - ( ) 안에 props : 부모 컴포넌트에게 받아온 데이터 - js 함수가 값을 받아오는 것과 똑같이 받아온다. export default BucketList; - 우리가 만든 함수형 컴포넌트를 export 해준다. - export 해주면 다른 컴포넌트에서 Bucket.. 2021. 8. 30.
Component & State & Props의 기본개념 Component - Component는 클래스형과 함수형이 있다. - 생김새와 용도가 다른데, React가 발전을 거듭하며 이젠 생김새만 다르다고 봐도 무방하다. - 리액트는 함수형 사용을 권장한다. - 리액트는 레고이고, 컴포넌트는 레고의 블럭이라고 생각하면 쉽다. Component란? 컴포넌트를 이해하고 잘 써먹으려면 웹 사이트를 잘 조각낼 줄 알아야 한다. Component는 웹 사이트의 조각이고, 우리는 이 조각을 모아서 웹사이트에 뿌려준다. 웹 사이트를 잘 조각낼 줄 아는 사람 = 리액트를 잘 쓰는 사람 아래와 같은 html이 있다. ... ... ... ... 위는 아래와 같이 컴포넌트로 쪼갤 수 있다. 즉, 이 웹 사이트는, 크게 , , 세 개의 컴포넌트가 있고, 컴포넌트는, , 컴포넌트로.. 2021. 8. 30.
JSX 사용하기 JSX란? - 리액트에서는 딱 하나의 빈껍데기인 html 파일만 존재한다. - public 폴더 아래에 있는 index.html - 리액트의 '뷰' 를 그리는 방법은, JSX를 통해 React 요소를 만들고 DOM에 렌더링 시킨다. - 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다. 안녕하세요! 시작이 반이다! - 하지만 JSX는 사용 가능 하다. (HTML을 품은 JS === JSX) - 아래는 리액트의 정식 홈페이지이다. JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 빈 껍데기인 HTML (index.html) JSX가 적용된 App.js import React from 'react'; imp.. 2021. 8. 30.
React 개발환경 설정 및 프로젝트 생성, 코딩 룰 VS CODE - React 코드 편집기로 사용. Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com Github Desktop - bash 창에서 command 를 입력할 필요 없이 GUI 로 구현되어 있는 깃허브.. 2021. 8. 26.
반응형

티스토리툴바