리액트 강의 정리글

노마드 코더 React JS로 영화 웹 서비스 만들기 강의 들으며 정리하는 글

Chapter 2

React : element, eventListner 한방에 생성 -> Interactive Power
React-dom : React 코드를 html상에 뿌려주는 것

JSX : html과 비슷한 생김새로 React JS 코드 만들 수 있게 해줌
Babel : 브라우저가 JSX 이해할 수 있도록 바꿔주는 것, 변환기

함수로 만들어줘야 넣어줄 수 있다 const Fun = () => {} : 컴포넌트
<Fun /> 으로 호출(소문자면 html코드로 생각), 컴포넌트를 합쳐줘서 렌더링

Chapter 3

State : 데이터가 저장되는 곳

React JS -> html 상에서 오직 바뀌는/달라지는 부분만 업데이트 (태그 전체 바뀌지 않음) << 장점

useState : [(데이터 초기값), function(데이터 바꿀 때 사용하는 함수)]
const [변수, 변수] = 배열 로 배열 값 할당 가능
function(값) 의 값으로 데이터 값 업데이트, 리렌더링 가능
첫번째 값 = current Value

function((current) => current + 1);

변수 값 다른 곳에서 바뀌어도 그 값 호출
onChange 이벤트 없으면 input 안의 수 바꿀 수 없다.

Chapter 4

Props : 괄호로 인자(오브젝트) 넣어서 함수에 전달. 데이터 전달, 설정, 재사용 가능. 변수도 가능하고 함수도 가능하다
커스텀 컴포넌트에 onClick 넣으면 event Listener 아니고 props
state change 되면 return에 있는 것 전부 리렌더링 (컴포넌트 상태 바뀌면 리렌더링)
React memo : 리렌더링 필요 없는 것 렌더링 방지
부모가 state 변경이 있으면 모든 자식들은 리렌더링된다 -> 어플리케이션이 느려지는 원인
memo로 다시 그려지는 컴포넌트 컨트롤 할 수 있음
props 변경되지 않는다면 다시 리렌더링할 필요 없다

propTypes 패키지 이용, type 지정으로 오류 발생 감지 가능

(변수).propTypes = {
	prop명 : PropTypes.prop type
}

뒤에 .isRequired로 표시해서 무조건 지정하게 할 수 있다

Chapter 5

create-react-app : 컴포넌트나 스타일들 독립적이게 유지시켜줌

css 적용시키고 className= {styles.btn} 이런거로 지정해주면 자동으로 랜덤한 class 이름 만들어줌, style도 modular가 될 수 있다는 뜻

(어쩌고).modules.css 로 클래스 이름 만들 수 있음
=> 클래스 이름 기억하고 있을 필요 없다

Chapter 6

component가 처음 렌더될 때만 코드가 실행되고 다른 상태 변화때는 실행되지 않게
코드 한 번만 실행되고 그 이후에는 실행되지 않게

useEffect : 두 개의 argument를 가지는 함수
첫 번째에 한 번만 실행될 함수 넣어주면 됨. 두 번째 인자에는 array [] 두는데 이 안에 있는 변수 변할 때(dependency) 첫 번째의 함수 실행되는 것

Cleanup Function
create -> destroy 되는 컴포넌트 create 할 때만이 아니라 destroy 할 때도 코드 실행 가능
useEffect의 첫번째 함수 return할 때 실행하도록 하면 됨
=> componentWillUnmount

7.6

React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps

라는 경고 발생

function Detail() {
  const { id } = useParams();

  const getMovie = async (movieId) => {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${movieId}`)
    ).json();
    console.log(json);
  };
  
  useEffect(() => {
    getMovie(id);
  }, [id]);

  return <h1>Detail</h1>;
}

로 바꾸어주니 오류가 사라졌다.