6. 1주차 과제

1주차과제 완성!!

막혔던부분

App.js

1. import [컴포넌트명] from [경로]

• 여기서 경로쓸때, 실수해서 오류가 계속났다. 이걸 못잡아서 시간을 많이 씀.
• ../ 한단계위 경로
• 가능하면 직접쓰지말고, 자동완성 이용하기

2. 클래스형으로 쓸때 형식

class App extends React.component{
	constructor(props){
    	super(props);
        this.state = {
        	name:'모레'
       	}
    }
    render(){
        return(
            <div className="App">
                <Landing name={this.state.name}/>
            </div>
        )
    }

요기에 state를 쓴다.

Landing.js (자식componet)

1. import img from [경로]
   이미지 파일넣을때에도 import를 해줘야함

2. 형식

const Landing = (props) => {
	return(
    	//jsx로 html써주기
        <h1 style={{fontSize:'1.5em', margin:'0px'}}>
          나는{" "}
          <span
            style={{
              backgroundColor: "#fef5d4",
              padding: "5px 10px",
              borderRadius: "30px",
            }}>
          {props.name}
          </span>
          에 대해 얼마나 알고 있을까?
        </h1>
)}

요기 props로 받아와서 name을 써준다.