componet = function = html을 반환하는 함수⚠️ 컴포넌트를 작성할 때마다 import React from "react"; 꼭 써주기!src 폴더에 Test.js 파일을 새로 만들어보자.:App.js:
prop = property!{fav} === props.favpropsprops는 argument로 가고\~\~~아빠 -> 자식배열의 각 원소에 함수를 실행해주고 그 결과값을 리턴해줌.mapmap recap리액트 내부에서 사용하기 위한 고유 값.list의 child는
다이나믹 데이터를 만들 때 state와 함께한다.데이터라는건 있기도하고 없어지기도하고 0이기도하고 엄청 다양한 종류의 것들임.고정적인 porps 대신 state가 필요한 이유다.그러기 위해서는 state이외에도 class 컴포넌트가 필요하다.🌐 문법:state는 가져
리액트 클래스 컴포넌트에는 render() 이외에 Life Cycle 함수를 제공한다.아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출됩니다.생성자는 this.state를 직접 할당할 수 있는 유일한 곳입니다. 그 외의 메서드에서는
API: https://yts-proxy.now.sh/list_movies.json ↪️ 출처getMovies가 비동기(async)라는 것을 알려주고, movies는 axios가 데이터를 가져올 때까지 기다린다(await).App은 render() 하면서 처음
nesting으로 인해 ${Card}의 배경색상은 blue가 표시됩니다.${Card}:last-child, ${Card}:nth-child(1), ${Card}:not 등 CSS처럼 사용가능합니다.
흔히 reset.css로 많이 사용했던 것 처럼 사용합니다.import styled, {injectGlobal} from "styled-components";를 추가해주면 사용할 수 있습니다.여기 <Button/>컴포넌트의 기본 스타일이 있습니다.<Ancho
props위의 코드 한줄은 아래를 함축시킨 ES6 문법입니다.:즉, color값이 있으면 전달 받은 color를 적용하고 없으면 blue를 적용하라는 뜻입니다.<Block/>컴포넌트는 color라는 props를 전달하고 있으므로 녹색 텍스트로 블록을 만들 수 있습
a 페이지에서 b 페이지로 이동하면서 값을 전달하고 싶을 때:====
screenOptions속성을 사용해서 디폴트 배경색을 변경할 수 있다.