1. Component

컴포넌트란 HTML을 반환하는 함수이다.
React는 컴포넌트들을 사용해 동적으로 HTML을 생성하는 역할을 한다.

왜 React는 빠른가?

• 가상 머신에서 돌아가기 때문에
• HTML 로딩을 기다리지 않기 때문에

function component>class component: componentDidmount같은 거 비효율적이라서~
함수형은 object로 state선언 안 하고 useState()라는 함수로 선언함
this안 써도 됨

return안에만 html태그

2. import react from "react";

jsx란 javascript만의 HTML로, 컴포넌트를 만드는 방법에 관한 문서이다. javascript extension: 형식

"react"에 jsx가 있다.
react는 오직 하나의 컴포넌트만을 렌더링한다(페이지 보여주기)
컴포넌트 이름은 대문자로 시작하는 것이 관행

3. Array.Map(function)

javascript함수로, array의 각 items에 대해 function을 적용하고 그 결과로 새로운 array를 반환한다.

"key={}"는 전달 안 됨 ???? -> 오브젝트 형식 안된다는 듯
react internal use를 위해 key전달해줘야 함
element를 구분하기 위해서

4. PropTypes

hard coding한 items이 적절한 타입인지 확인

PropTypes.string.isrequired;

5. .setState({newState})

State는 dynamic data를 다루는 object

사용자 지정 class component는 return을 하지 못한다.
따라서 class React가 가진 render() method를 사용한다.
react는 모든 class component에서 render()를 보면 자동으로 실행한다.

그런데 직접 값을 수정하면 react가 render()를 다시 호출하지 않는다. 따라서 state 상태가 변할 때마다 render()를 다시 호출할 필요가 있는데,

setState()함수가 그 역할을 한다.
.setState({newState}) 는 매개변수로 받은 state로 상태를 업데이트하고 render()를 호출한다.

• mounting : component 생성
• updating : setState() 호출할 때마다 실행
• unmounting : component 삭제

Axios()-동기/비동기

url에서 데이터 불러오는 함수?'
img 태그에는 alt 속성 쓰기
기본적으로 넘겨주는 props
동적으로 처리할 내용을 함수로 써 주고 return안에 있는 거는 화면에 제시할 것들
함수컴포넌트는 꼭 대문자로 파일이름설정하고 대문자로 불러와야 함

package.json은 설정 불러오고/고치는 파일

• props: 전달받은 매개변수
• state: 다시 화면에 보여주고 싶을 때

6. Router

url을 확인하고 해당 component를 불러옴
router 안에 써 줘야 함

<Route exact={true} path="" component={}/>

7. Navigation

<a href=""/>는 HTML이라 페이지를 새로고침한다.
<Route> 안에 <Link to="" state={} ></Link>를 넣는다.

• react-router가 모든 route에 기본값으로 props를 채워 둔다.

• state를 통해 정보를 보낼 수 있다.

• 왜 Link import할 때 {} 씌워야 하나?

• :id 는 : 뒤에 있느 id가 변수라는 것을 알려줌

JS clean code

• 이해할 수 있는 변수 이름을 사용하라

const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];	// ||연산자는 뭘 하는 거?
saveCityZipCode(city, zipCode);

• short circuiting은 뭔가?

• es6의 destructuring은 뭔가?
  어떤 사람이 그 함수의 시그니쳐(인자의 타입, 반환되는 값의 타입 등)를 볼 때 어떤 속성이 사용되는지 즉시 알 수 있습니다. 또한 비구조화는 함수에 전달된 인수 객체의 지정된 기본타입 값을 복제하며 이는 사이드이펙트가 일어나는 것을 방지합니다. 참고로 인수 객체로부터 비구조화된 객체와 배열은 복제되지 않습니다. Linter를 사용하면 사용하지않는 인자에 대해 경고해주거나 비구조화 없이 코드를 짤 수 없게 할 수 있습니다.
  => 무슨 말인가?

• 리팩토링은 뭔가?

• 클로저가 뭔가?