React

class App extends Component {
  render(){
   return (
    <>
    <div>halo hej</div>
    <div>jong</div>
    </>
   )
  }
}

// halo hej
   jong

으로으로 감싸야 한다( <></> 이걸로 대처 가능 )

component

class App extends Component {
  render(){
   return(
     <div>
    <Greetings />
    </div>
   )
  }
}

Greetings = () => {
 return <div>Hello Hej</div>
}

// Hello Hej

중요한점
1. 컴포넌트를 모듈화 하면 다른 곳에서 재사용이 가능하다
2. 유지보수가 수월하다
3. 모듈화 파일을 여러개로 쪼갤수 있다
props

class App extends Component {
  render(){
   return(
     <div>
    <Greetings name = 김덕배/>
    </div>
   )
  }
}

Greetings = ({name}) => {
 return <div>Hello {name} Hej</div>
}

// Hello 김덕배 Hej

중요한점
1. 컴포넌트에서 props 즉 매개 변수처럼 가져와서 필요한 부분에 할당 가능하다
2. 일일이 하드코딩 할 필요 조차 없다

state

class App extends Component {
  constructor(props){
   super(props)
   this.state = {
 	 name: 김복족,
     job: officer
   }
  }
  
  render(){
   return(
     <div>
    <Greetings name = {this.state.name} job = {this.state.job}/>
    </div>
   )
  }
}

Greetings = ({name, job}) => {
 return <div> 이름 : {name} 직업 : {job}  </div>
}

// 이름 : 김복족 직업 : officer

중요한점
1. this.state를 데이터처럼 가져올 수 있다
2. 컴포넌트에 props에 할당 할 수 있다

setState

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "김복족",
      job: "officer"
    };
    this.handleClicker = this.handleClicker.bind(this);
  }

  handleClicker() {
    this.setState({
      name: "김팔푼",
      job: "백수"
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClicker}> click me</button>
        <Greetings name={this.state.name} job={this.state.job} />
      </div>
    );
  }
}

Greetings = ({ name, job }) => {
  return (
    <div>
      이름: {name} 직업: {job}
    </div>
  );
};

// 이름 : 김복족 직업 : officer
// 이름 : 김팔푼 직업 : 백수     (버튼 클릭하는 경우)

중요한점
1. this.state의 데이터에 변화를 줄 수있다
2. 동적인 부분을 만들기 위해 사용하기 좋다
3. 보통 메소드를 작성할때 같이 사용된다
4. class 함수로 작성시 함수바인딩을 꼭 해줘야함

배열 다루기(map)

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: [
        {
          id: 1,
          name: "기생충",
          director: "봉준호",
          rating: 4.5
        },
        {
          id: 2,
          name: "극한직업",
          director: "이병헌",
          rating: 5
        }
      ]
    };
  }

  render() {
    return (
      <div>
        <h1>한국 영화</h1>
        <div>
          {this.state.movies.map((movie) => (
            <Display
              key={movie.id}
              name={movie.name}
              director={movie.director}
              rating={movie.rating}
            />
          ))}
        </div>
      </div>
    );
  }
}

Display = ({ name, director, rating }) => {
  return (
    <div>
      <ul>
        <li>영화: {name}</li>
        <li>직업: {director}</li>
        <li>평점: {rating}</li>
      </ul>
    </div>
  );
};

// 한국 영화

영화: 기생충
직업: 봉준호
평점: 4.5

영화: 극한직업
직업: 이병헌
평점: 5

중요한점
1. 하나하나 하드코딩 안해도 됨
2. 유지보수가 수월함

componentDidMount and fetch API // jsonplaceholder API를 받아 작성

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ""
    };
  }

  GetApi = () => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          data: json
        });
      });
  };
  componentDidMount() {
    this.GetApi();
  }
  render() {
    let { data } = this.state;
    return (
      <div>
        {this.state.data ? (
          <DataHouse
            userId={data.userId}
            title={data.title}
            completed={data.completed}
          />
        ) : (
          "불러 오는 중"
        )}
      </div>
    );
  }
}

DataHouse = ({ userId, title }) => {
  return (
    <>
      <div>번호 : {userId}</div>
      <div>제목 : {title}</div>
    </>
  );
};
  
//번호 : 1
  제목 : delectus aut autem
  
// 불러 오는 중(this.state.data에 데이터가 없는경우)

중요한점
1. fetch API 사용시 componentDidMount 사용
2. ES6 구조분해 및 할당을 통해 this.state.data 이렇게 쓰지않고 data 쓰면 된다
3. fetch 한 데이터를 state에 넣고 자유롭게 데이터에 접근 할 수 있다