[REACT]0105

●외부 API를 가져오기 

api테스트 할때 ↓ 요거 사용함

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

 

 

●promise

promise란?

비동기 처리에서 사용되는 객체, axios또한 promise를 기반으로 만들어짐

api로부터 데이터를 페치하기 위해서 , fetch로 url을 전달할 수 있다.

비동기의 결과를 객체화 시킨다는 점이  장점

커피숍에서 주문을 받고 음료를 만들고 음료를 서빙 후 다시 재 주문을 받고 
음료를 만드는 것이 동기적 처리이며, 
모든 사람의 주문을 한꺼번에 받고 음료가 완성되는 대로 사람들에게서빙을 하는 것이
비동기적 처리이다.

출처:https://velog.io/@autumnhee/React-async-await%EC%99%80-then-%EC%B0%A8%EC%9D%B4%EC%A0%90

나도 비동기 동기가 이해가 잘안가서 찾아봤는데 이해가 남겨서 리그램해보았다.

 

 

비동기 함수가 필요한 이유 

promise함수는 then을 사용해 호출 가능함

기본적으로 promise가 실행되자마자 then메서드 호출 ->then에서는 데이터가 도착하자마자 콜백으로 실행될 코드이다.

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((res) => res.json())
  .then((data) => console.log(data));
console.log("yjyj");

 

 

 

promise의 단점을 보완하기 위해 async& await 등장

단점? promise의 결과로 then()을 사용해 또다른 promise를 호출하면 다른 promisechain이이 생기고 문장이 복잡해짐

이와 같은 형태를 async & await로 만들어야 함

 

●async & await

사용법

함수 앞뒤로 async키워드 추가 ( 이 함수에서 비동기 처리를 위한 promise동작을 함을 명시함)

함수 내부에서 promise앞부분에 await키워드를 사용함 '(결과를 기다릴 함수 앞에 작성하면 됨)

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("resolved");
    }, 2000);
  });
}

async function asyncCall() {
  console.log("calling");
  const result = await resolveAfter2Seconds();
  console.log(result);
}

 

 

 

comonent  작성법

1.함수 이름은 대문자로 표시

2. 마크업 반환

 

구성요소 중첩: 말 그대로 한 구성요소 안에 다른 구성요소를 집어넣음

 

 

●props

구성 요소 간에 데이터를 전달하는 방법

상위 요소 -> 하위 요소로 이동 

부모 채널에서 , 자식 채널로 이동한다고 생각하면 된다.(기본적으로 트리구조라고 생각하면 됨)

 

1) props를 컴포넌트에 전달하기 

2) 전달한 컴포넌트에서 props받기 

 

 

이렇게 보내니, 객체 형태로 보내짐을 알 수 있다.

 

 

객체 형태에서 빼내기 위해서는 자바스크립트를 이용해야 한다.

function Movie(props) {
  console.log(props);
  return (
    <div>
      <img src={props.photoName} alt={props.name} />

      <h3>{props.name}</h3>
      <p>{props.author}</p>
    </div>
  );
}

 

이렇게 하면 화면에 값을 보여줄 수 있다.

 

 

 

cf)

ex)
자바 스크립트에서 
year="10" //문자열 선언
year={10}  //숫자 선언

 

 

react의 props규칙 

1. props는 오로지 읽을 수 밖에 없고 이는 불변한 내용이다, 리액트가 가지고 있는 엄격한 규칙중 하나이다.
2. 만약 내가 변할 수 있는 props를 원한다면 나는 state를 사용해야 함 

이유는?

구성요소의 props개체를 바꾸면 부모 구성에도 영향을 주게 됨

props와 state의 상태가 퓨어해야 애플리케이션을 최적화하고  버그를 피하며 예측이 가능하게 만들 수 있다
단방향의 데이터로 데이터의 예측을 용이하게 해서 데이터를 효과적으로 제어 가능
양방향은 구현하기에 성능이 떨어짐
그래서 

리액트는 one-way data flow임을 가지고 있음을 알아야 한다. 

cf)angular는 양방향 데이터 흐름을 사용한다.

 

■목록을 렌더링하는 방법

외우기!

      {/**영화목록 렌더링 */}
      <ul className="movies">
        {movieData.map((movie) => (
          <Movie movieObj={movie} key={movie.name} />
        ))}
      </ul>

 

 

■조건부 렌더링

삼항 연산자 

왜 if-else문을 사용할 수 없는지 

if-else문은 값을 생성하지 않기 때문