React_begin

React JS에서 element 만들고 이를 HTML에 updatereact import : 어플리케이션이 interactive하게 동작하도록 도와주는 libraryreact-dom import : 만든 react element를 html body에 넣을 수 있도록

createElement를 편리한 도구로 대체하여 사용 --> JSX JSX : JS를 확장한 문법, HTML과 같은 문법 사용하고 있어서 이해 쉽고 가독성 높음 컴포넌트를 다른 컴포넌트에 넣기 -> 렌더링? JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로

state : 데이터가 저장되는 곳 (값이 바뀌는 데이터를 저장해놓음) counter 증가시키는 script 잘 사용하는 방법은 아님 counter가 올라갈 때마다 render 함수 호출해서 계속 다시 수정해주고 있기 때문,, > vanila.js 와 다른 장점

더 나은 state 변경 방법 > setCounter() 안에 함수로 작성 들어가는 값은 현재값, return 값은 변경되는 값 현재 들어가는 값을 가지고 값이 변경되도록 안전하게 함수 사용 ※ jsx에서는 쓰면 안되는 javaScript 용어 : class ->

Props? 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법

한 파일당 한 컴포넌트를 가지고 있고, index.js에서 그 컴포넌트를 import style 적용 시 .css 바로 import하지 않고, import styles from "./Button.modules.css" -> create-react-app이 css코드를

State 직접 수정 X 함수를 통해서 간접적으로 수정한다 ex) toDo = "" (x) state 변경하는 함수(setToDos) 안에 다시 함수 작성하여 state 수정 currentArray가 함수의 입력 매개변수, => 하여 그 다음에 리턴될 새로운 arra

fetch coinpaprika api 사용... useEffect loading api 로딩 끝나면 false되는 state 이를 통해 h1에서 코인 개수를 보이고 숨기거나 로딩 상황을 보이고 숨긴다 coins api를 통해 가져온 정보들 array map함수를

movie api 가져오기 fecth 함수로 api 링크 넣기 첫 번째 then으로 json() 인코딩?? 하고 두 번째 then으로 해당 내용 콘솔에 찍기 이런 식으로 object 결과 나옴 여기서 우리가 필요한건 data의 movies array니까 consol

Movie component가 props 정보들을 parent component로부터 받아온다고 말하고 있음 Home.js => 우리의 App component 전체를 가지고 있음 (Movie 페이지의 Home이라고 생각) React-router : 신규 페이지를