ReactJS로 영화 웹 서비스 만들기[노마드코더]

리액트를 시작하기 전 import 해줘야 한다. 순서대로 react, react-dom , babel 이다. 바닐라 js 는 html 작성 후 js에서 html 을 수정하는데 리액트에서는 반대로 js를 먼저 작성해준다. React.createElement(태그,프

state 이해하기.여기서 countUp 이라는 함수는 counter 이라는 숫자를 1씩 증가.Container은 html 요소들을 띄워주며, 이때 {변수} 를 넣어줄 수 있다. onClick={함수이름} 은 클릭 시 함수가 실행된다는 뜻.바닐라에서는 innerText

Inputs and State

props는 컴포넌트에 어떤 값을 전달해줄때 사용.같은 스타일, 상태 등을 가지고 다른 html 을 할당하고 싶을 때 props를 이용할 수 있다.이때 props는 {banana, big} 이고,({banana,big} 대신 props 라고 지정하면 사용할 때 pro

node -v 로 노드 설치되어있는지 미리 확인npm : package 관리npx: package 설치모듈 업데이트 확인이 어렵다.프로젝트마다 다른 버전의 모듈이 필요할 때는 버전 문제가 발생할 수 있다.create-react-app 같은 보일러플레이트(여러 군데에서

useEffect : 컴포넌트 rendering 할 때 특정 state가 변할때만 해당 함수 호출즉, 한 컴포넌트 안에 여러 이벤트가 있을 때, 특정 이벤트가 특정 state가 변할때만 render 하고 싶을 때 사용한다.\[] 안에는 2개 이상의 상태가 들어갈 수도

a.map(함수) 은 a 배열의 모든 요소들을 하나씩 돌며 함수 실행. 이때 함수에 파라미터가 이 요소가 됨. onChange 함수는 input 의 값을 가져오는 함수.input의 value들을 하나하나씩 e.target.value를 이용해 가져와서 사용해야함. o

fetch 로 해당 주소에 네트워크 요청하기. 주소에 데이터를 가져오는것은 시간이 많이 걸리기 때문에 await을 이용해 비동기 처리 해준다. .json으로 바꿔줄때도 비동기처리 해줘야해서 await이 두번 쓰이게 됐다. 데이터를 받아오면 해당 데이터의 movie

react-router-dom 으로 a 태그 대신 링크를 달 수 있다. a태그는 이동할 때 페이지를 전부 새로고침 하지만 Link 는 브라우저의 주소만 바꿀때 사용한다.NavLink 와 Link 차이점은, NavLink는 스타일을 적용할 수 있다. 폴더 구조는