스파르타 코딩클럽 - 리액트 1주차(12)
1. React에서 CSS사용하기!
App.js
import React from 'react';
import logo from './logo.svg';
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from './BucketList';
import './style.css';
// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {
constructor(props){
super(props);
// App 컴포넌트의 state를 정의해줍니다.
this.state = {
list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
};
}
// 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
render() {
// this 키워드를 통해 state에 접근할 수 있어요.
console.log(this.state);
return (
<div className="App">
<div className="container">
<h1 className="title">내 버킷리스트</h1>
<hr className="line"/>
{/* 컴포넌트를 넣어줍니다. */}
{/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
<BucketList list={this.state.list} />
</div>
</div>
);
}
}
export default App;
BucketList.js
// 리액트 패키지를 불러옵니다.
import React from 'react';
// 함수형 컴포넌트는 이렇게 쓸 수도 있고
// function Bucketlist(props){
// return (
// <div>버킷 리스트</div>
// );
// }
// 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요.
// 저희는 앞으로 화살표 함수를 사용할거예요.
// 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.
// js 함수가 값을 받아오는 것과 똑같이 받아오네요.
const BucketList = (props) => {
// Quiz 1: my_list에 ['a', 'b', 'c'] 대신 부모 컴포넌트가 넘겨준 값을 넣으려면 어떻게 해야할까요?
const my_lists = props.list;
console.log(props);
// 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
return (
<div className="lists">
{
// js의 내장 함수 중 하나인 map입니다. 리스트의 갯수만큼 => 오른쪽 구문을 반복해요.
// 자세한 사용법은 아래 링크를 확인해주세요.
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
my_lists.map((list, index) => {
// 콘솔을 확인해봅시다 :)
console.log(list);
return (<div className="list-item" key={index}>{list}</div>);
})
}
</div>
);
}
// 우리가 만든 함수형 컴포넌트를 export 해줍니다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요.
export default BucketList;
style.css
.App {
width: 100vw;
min-height: 100vh;
background-color: black;
padding: 32px;
box-sizing: border-box;
}
.container {
max-width: 350px;
min-height: 80vh;
background-color: #fff;
padding: 16px;
margin: 20px auto;
border-radius: 5px;
border: 1px solid #ddd;
}
.title {
color: #e0a83f;
text-align: center;
}
.line {
margin: 16px 0px;
border: 1px dotted #e0a83f;
}
.lists {
display: flex;
flex-direction: column;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.list-item {
padding: 16px;
margin: 8px;
background-color: #e0a83f;
}
Author And Source
이 문제에 관하여(스파르타 코딩클럽 - 리액트 1주차(12)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tmdals3785/스파르타-코딩클럽-리액트-1주차12저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)