뇌 채우기 공간

■ 함수형 컴포넌트 BucketList.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // 리액트 패키지를 불러온다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 // function Bucketlist(props){ // return ( // 버킷 리스트 // ); // } // 이렇게 쓸 수도 있다.. =>가 들어간 함수를 화살표 함수라고 한다. // ()안에 props는 부모 컴포넌트부터 받아온 데이터다. // 얘의 부모가 누구냐? const BucketList = (props) => { // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환한다. return ( 버..

■ Component란? 리액트는 레고! 컴포넌트는 블록! 웹사이트를 조각내자 컴포넌트를 이해하고 잘 써먹으려면 웹 사이트를 잘 조각낼 줄 알아야한다. 이 페이지를 만든다고 생각해보자 간단하게 1. 2. 1. 2. 3. 이렇게 조각으로 나눌 수 있다. 이렇게 나눈 조각 하나하나를 컴포넌트라고 부른다. header컴포넌트, container컴포넌트, footer컴포넌트가 있고 container컴포넌트 안에는 imagebanner컴포넌트, contests1컴포넌트가 있다. Component는 웹 사이트의 조각이고, 우리는 이 조각을 모아서 웹 사이트에 뿌려준다. ◎ Component에서 데이터 관리는 어떻게 하는가? state state는 component가 가지고 있는 데이터이다. 해당 컴포넌트에서만 사용..

■ CRA가 무엇인가? React는 레고같은 친구이다. 레고로 성을 만드는 것 처럼 우리는 리액트를 사용해서 웹 사이트를 만든다. 레고는 네모 블록, 긴블록 등등 자기가 원하는 것을 따로 살 수 있다. 리액트도 마찬가지로 자신이 필요한 것들을 하나씩 설치할 수 있다. 그런데 레고로 하나씩 구매하기 귀찮으면 해리포터 성만들기 같은 패키지를 사는 것처럼 CRA는 웹사이트를 만들때 필요한 것을 몽땅 넣어서 만든 패키지이다. ■ JSX란? 리액트에는 딱 하나의 html파일만 존재한다. (public 폴더안에 있는 index.html) 그럼 리액트에서는 어떻게 뷰를 그리냐? JSX문법을 이용해서 React요소를 만들고 DOM에 렌더링 시켜서 그린다. HTML을 품은 JS === JSX 이다. HTML태그는 .js..