Ming's develop story

BucketList.js // 리액트 패키지를 불러옵니다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 // function Bucketlist(props){ // return ( // 버킷 리스트 // ); // } // 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요. // 저희는 앞으로 화살표 함수를 사용할거예요. // 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다. // js 함수가 값을 받아오는 것과 똑같이 받아오네요. const BucketList = ({list}/*또는 {list} 대신 props*/) => { // Quiz 1: my_list에 ['a', 'b', 'c'] 대신 부모 컴포넌트가 넘겨준 ..

import React from 'react'; import logo from './logo.svg'; import './App.css'; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from './BucketList'; // 클래스형 컴포넌트는 이렇게 생겼습니다! class App extends React.Component { constructor(props){ super(props); // App 컴포넌트의 state를 정의해줍니다. this.state = { list: ['영화관 가기', '매일 책읽기', '수영 배우기'], }; } // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니..

BucketList.js // 리액트 패키지를 불러온다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 function Bucketlist(props){ return ( 버킷 리스트 ); } // 이렇게 쓸 수도 있다. =>가 들어간 함수를 화살표 함수라고 한다. // () 안에 props! 부모 컴포넌트에게 받아온 데이터이다. // js 함수가 값을 받아오는 것과 똑같이 받아온다. const BucketList = (props) => { // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 부른다.)를 반환해준다. return ( 버킷 리스트 ); } // 우리가 만든 함수형 컴포넌트를 export 해준다. // export 해주면 다른 컴포넌트에서 Buc..

1. Component란? 리액트가 레고라면 컴포넌트는 블록이다. 클래스형, 함수형으로 나뉜다. 이 코드를 조각조각 내보면 아래와 같이 나눌 수 있는데 나눈 조각 하나하나를 컴포넌트라고 부른다. 즉, 이 웹 사이트는 크게 , , 세 개의 컴포넌트가 있고, 컴포넌트는 , 컴포넌트로 이루어져 있는 것이다. 2. State 와 Props state는 Component가 가지고 있는 데이터이다. 아까 사이트 조각 중 컴포넌트를 예로 들면 헤더에 들어갈 데이터는 로고 이미지 경로, 메뉴 이름 등이 있다. 이 데이터는 나 컴포넌트에서는 쓰지 않는다. 즉, 컴포넌트에서만 쓰는 정보이다. state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터이다. 생성도 수정도 오직 해당 컴포넌트 내에서만..

라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다. 라이프 사이클을 아는 건 중요한데 왜 우리는 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 쓰냐? 리액트 공식 매뉴얼에서 함수형 컴포넌트를 더 권장하기 때문이다 (리액트 16.8버전부터 등장한 React Hooks으로 라이프 사이클 함수를 대체할 수 있거든요.) 더 많은 라이프 사이클 함수는 공식 문서에서 확인할 수 있다. 코드를 보며 복습해보자! import React from "react"; // 클래스형 컴포넌트는 이렇게 생겼습니다! class LifecycleEx extends React.Component { //extends는 확장 - 자식이 부모클래스꺼를 가져온다. // 생성자 함수 - 초기값들을 설정해준다. constructor(p..