Ming's develop story

height: 100vh; /*vh는 화면을 기준으로 높이를 얼마나 줄지 정할 수 있다 vw는 넓이!!! */ 이렇게 화면 대비 100%를 줬는데도 밑의 사진과 같이 공백이 남는 현상이 있는데 여백상쇄, 마진 병합 상쇄현상 이라고 부른다. 이는 h1의 자체 스타일(기울어져 있음) display 가 block이어서 발생하는데 밑의 사진과 같이 부모요소의 display를 변경해주거나 직접 그 요소에 직접 바꿔주면 된다. 내 코드 style.css .App { background-color: #eee; height: 100vh; /*vh는 화면을 기준으로 높이를 얼마나 줄지 정할 수 있다. */ width: 100vw; display: flex; /*높이를 센터로 밀어넣어 주기위해 사용 */ } .contai..

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는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터이다. 생성도 수정도 오직 해당 컴포넌트 내에서만..