state, props 복습

state

• 화면에 보여지는 데이터들의 저장소
• state안에 / 밖에 넣어야 할 데이터가 다르다.
• state에 데이터를 넣는다? -> 변화를 주고 싶어서 넣는 것(동적)
• 메소드를 활용해서 변화를 줄 수 있다는게 가장 큰 특징
• 리액트는 setState가 호출되야 새로 render()를 호출한다. 때문에 state를 바꾸어줄땐 반드시 setState로!
• 여담 : 리액트에서 refresh를 하면 state값이 다시 초기화 되기 때문에 가능하면 refresh를 하면 안됨

• 부모에서 state만들 때 constructor을 굳이 선언 안 해줘도 됌

props

• 인스타 feed창 같음.
• 여러개를 재사용 할건데 똑같은 틀만 만들어놓고 안에 있는 데이터를 바꾸어야한다
• 각각의 컴포넌트에 데이터를 넘겨주는 객체
• console.log(this.props.키값)
• 키값을 정해주는 방법? : 부모컴포넌트에서 정해줌
• `state = {image_url: ''}'
• `
• 자식에서 this.props.image 로 접근
• props도 자식 컴포넌트에서 변화가 있으면 state와 마찬가지로 다시 render가 된다.
• react는 단방향이라 위에서 아래로 쭉 데이터가 내려온다.

map

• map을 가지고 컴포넌트 재사용
• 컴포넌트 배열의 각각의 데이터가 다르다?
• 리액트 파일 참고

자식

import React, { Component } from 'react';

class Card extends Component {
  render() {
    console.log("Card", this.props)
    return (
      <>
        <div>Title : {this.props.title}</div>
        <div>Number : {this.props.number}</div>
        {/* <div>{<Child title={this.props.title}</div> 
        이것처럼 하면 컴포넌트 안에 컴포넌트 자식으로 줄 수 있다.
        하지만 이걸 계속하면 불필요한 렌더가 계속 되기 때문에 비추
        불필요한 렌더를 막아주는 방법이 있는데 그건 나중에! 이걸 최적화라고 한다.*/}
      </>
      // 만약 자식에서 부모로 넘겨주고 싶을 땐 어떡해?
      // 만약 input정보들을 모아서 회원가입을 해야하는데, 이건 어떡해?
      // 아예 부모에서 state를 관리한다. 
      // 부모에서 onchange를 만들어 준다음에 함수 자체를 자식에다 props로넘겨주면
      // props의 키값으로 함수를 넣어준다. 
      // 인자가 부모로 간다는 말이고 부모에서 setState를 해주면 된다.

    )
  }
}
export default Card;

부모

import React, { Component } from 'react';
import Card from './Card'

const arr = [
  {title : 'hello', number : 1},
  {title : 'hey', number : 2},
  {title : 'yo', number : 3},
];

export default class index extends Component {
  constructor() {
    super();
    this.state = {
      text: "abc from 부모"
    }
  }

  render() {
    //state도 여기서 확인 가능
    //render에는 바뀐 state값이 있을 수 밖에 없다.
    //바뀐 state값은 JSX가 return된다.
    console.log(this.state.text)

    return (
      <div>
        {arr.map(el =>{
          return <Card title={el.title} numver={el.number}/>
          //el에 객체가 들어오는거니 el.title 처럼 접근해줘야.
          //객체에는 순서가 없기 때문에 인덱스를 지정해주지 않으면 오류가 난다. 
          //이 키값이 순서대로 절대 날 수 없다. 
        })}
      </div>
    )
  }
}
/*
mapTest = () => {
  const arr = [1, 2, 3, 4, 5];
  //기준이 되는 배열(map이 들어가는 것은 반드시 배열이어야한다)
  //for문과 비슷해요!
  arr.map((num, index) => { //초기엔 num=1, index=0 인것!
    //map은 배열을 받아와줘야한다. 즉 함수 인자. 이름을 마음대로 지어줘도 된다.
    //map 콜백함수의 두 번째인자로 index를 받아준다. 배열의 index
    return num
    //우리는 여기서 컴포넌트를 return 해준다. 
  });

  /*콜백함수란? : 당장 호출하는게 아니라 나중에 호출하고 싶을 때 
    예를들어 이벤트. 만약 클릭이 됐을 때 실행시키고 싶으면 인자를 함수로 받는다
    hello();
    hello.addEventListener('click', () => {})
    hello.addEventListener('click', hello) : ()이 아니라 함수를 정의만 해주고 이
    이벤트가 일어났을때 위에있는 hello 함수를 호출해주는 것
  */
  /*
mapTest = () => {
  const arr = [1, 2, 3, 4, 5];
  //기준이 되는 배열(map이 들어가는 것은 반드시 배열이어야한다)
  //for문과 비슷해요!
  arr.map((num, index) => { //초기엔 num=1, index=0 인것!
    //map은 배열을 받아와줘야한다. 즉 함수 인자. 이름을 마음대로 지어줘도 된다.
    //map 콜백함수의 두 번째인자로 index를 받아준다. 배열의 index
    return num
    //우리는 여기서 컴포넌트를 return 해준다. 
  });

  /*콜백함수란? : 당장 호출하는게 아니라 나중에 호출하고 싶을 때 
    예를들어 이벤트. 만약 클릭이 됐을 때 실행시키고 싶으면 인자를 함수로 받는다
    hello();
    hello.addEventListener('click', () => {})
    hello.addEventListener('click', hello) : ()이 아니라 함수를 정의만 해주고 이
    이벤트가 일어났을때 위에있는 hello 함수를 호출해주는 것
  
  */

비동기

결과를 기다리면 너무 지체가 되기 때문에 다음줄로 넘어가버림
만약 결과값이 들어오면 이걸 가지고 사용

fetch

• 엄청 많은 데이터가 있으면 이걸 자바스크립트 파일로 가지고 있다는것은 말도안됨
• 데이터베이스에서 사용하겠지?
• 데이터 베이스에서 요청을 하는것
• 데이터 파일을 state를 통해서 받아와주는것
• 결국 비동기 처리를 위한것

API 호출

• JSON 데이터를 쓰는 이유: 모든 언어의 객체(딕셔너리)와 비슷하기 때문

mock데이터.

화면구현을 위해서 백엔드에서 받아온게 아니라 직접만든 데이터

---

과제설명

• 받자마자 npm install 해줘야함.

• 깃 이그노어가 있어서 npm 다시 받아줘야함.

• package.json 에 있는 파일 받아야함.

• 브랜치 만들어거 작업하기

• pull request 하기

• git branch feature'이름'

• gir checkout branch'이름'

• add ,commit

• git push origin feature'이름'