1. Props를 받아서 사용하는 법.

• props에서 가장 중요한 것은 자식 컴포넌트에서 어떤 자료를 어떤 이름으로 부모 컴포넌트로 보내서 부모 컴포넌트는 어떻게 사용할 것인가?이다.
• props는 유저가 수정이 불가능한 자료를 보낸다.

2. 본문(부모 컴포넌트)에서 props를 사용하기

• 주로 전체 목록을 보여줄 때 사용한다.
• map과 함께 사용하자!
• map 메서드는 자바스크립트에서 사용하는 것이기 때문에 {} 안에 넣고, 똑같이 사용하듯이 해 주면 된다.
• return 되는 값은 자식 컴포넌트 자체가 될 것이고, 그 안에서 key값을 꼭 id와 같은 유일한 것으로 설정하고, 받아올 props의 이름과 그에 맞는 주소를 정확히 적어 준다.
• 주의! : 주로, map을 돌고 난 자료들 즉, map에서 정해준 이름을 사용해야 똑바로 map 이후에 나올 자료들이 들어간다.
• 뭔가 이상하다? : 자식 컴포넌트를 보면서 똑바로 자료를 받고 있는지 살펴본다 => 부모 컴포넌트의 map의 구조를 잘 살펴본다. =>
  props로 어떤 자료를 받고 있는지 정확히 찾아가 본다. => 오타를 살펴본다.

점점... 초반부에 배운 것이 흔들린다. 다시 복습을 탄탄히 해야 할 것 같다.
알고리즘 문제는 착실히 하루에 2개라도! 하자.

1. 값으로서의 함수

• 자바스크립트는 객체 지향적 언어이다. 그래서 함수도 해당되는 말이다.
• 함수를 '값'이라고 생각하면 편하다.
• function a () {} => 즉, a 함수가 a라는 이름의 '변수'로 담겨 있다는 이야기이다.
• 한 단계 더 나아가서 이런것은 어떨까?

a = {
    b: function() { //b는 이 객체 안에서는 키이지만, 값이  함수 이므로,
    //변수이기도 하다. 우리는 이런것을 속성(property) 라고 한다. (이것이 메소드다)
    }
};

• 결국 함수가 인자로도 전달 될 수 도 있고, 심지어 리턴도 된다!
• 그래서 함수들이 연결 => 연결 되는 구조로 되어있다. 가장 처음에 받는 값이 내부의 함수를 돌아, 다시 그 값이 다른 함수로 들어가 나오는 이런 형태도 있기 때문에 어떤 값이 어디로 가는지를 잘 보고 따라가는 게 포인트다.

2. 위를 보고 콜백함수를 다시 보자

• 기존의 함수를 사용할때, 어떠한 다른 '다른 기준'으로 내부에서 리턴 시켜 다시 우리가 원하는 기존의 함수를 리턴 시킨다.

var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, ]; // 이대로 sort를 사용하면 문자열 처럼 비교하게 되므로 1, 10, 2, 20... 순으로 정렬을 한다.
var sortfunc = function(a, b) {    // 그래서 정렬의 기준이 될 함수를 만들어 준다. 숫자로 보면서, 앞에거를 뺴서 기존 sort의 작동 방식으로 작은것을 앞으로 빼버린다.
    return a -b;
    }
    console.log(number.sort(sortfunc)); // 결국 답은 우리가 원하는 1, 2, 3... 순으로 나오게 된다.

• 이때 우리는 저 sortfunc를 '콜백 함수'라고 말한다. 그래서 그 기준을 정해놓고 부르면 다시 와라! 이런 식으로 사용하게 되는 것이다.
• map이나 filter도 한 줄에 화살표 함수로 콜백 함수를 쓰고 있었던 것이다!

3. 비동기 처리

• 이미 함수는 다 짜 놓고 특정 상황이 되면 실행시킨다.
• 리액트에서 그 이벤트가 작동했을 때! 어떠한 정보를 갱신시켜 준다. 이때, 이미 다 로딩은 되어있는 웹 안에서 페이지 자체를 변경시키지 않고 필요한 컴포넌트만 불러오게 된다.

4. 리액트의 useStage 마음대로 해보기

• 자료를 주고받기 위해 만든 것이라는 것을 토대로, set 된 것을 어디든지 옮길 수 있다는 것을 알았다.
• value 값을 수정하거나 혹은, 다른 value를 또 다른 곳으로 옮길 수 도 있다.
• 함수를 자세히 들여다보면 어디서 어떤 정보가 와서 어디로 가게 되는지를 정확히 파악할 수 있다.

5. 자식 컴포넌트와 부모 컴포넌트

• 자식 컴포넌트 : 컴포넌트를 받아서 사용되는 컴포넌트. (import 받는 컴포넌트. ex: app.js)
• 부모 컴포넌트 : 만들어진 컴포넌트를 전달해 주는 컴포넌트. (ex: 나머지 모든 컴포넌트들)
  • 이때, 부모 것을 자식으로 올리려면 props를 이용한다!

1. 구조 분해 할당

• 배열이나 객체의 속성을 분리하여 그 값을 변수에 담을 수 있다!

let [x, y] = [1, 2];
console.log(x);  // 1
console.log(y);  // 2

• 배열이 먼저 나와서 선언되고 거기에 이미 선언된 객체가 할당됨.
• 해당하는 값을 넘으면? : 당근 undefined 그러나 기본값을 설정하여 막을 수 있다.

let [a, b, c,] = [1, 2];
// 원래는 c는 undefined가 되어야 하지만,
let [a=3,  b=4,  c=5] = [1,  2];
//이제는 c가 있어서 그대로 5가 나온다.

• 공백으로 일부 반환 값을 무시할 수 도 있다.

let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];
// index 1 의 Tom 은 사라지고 user2는 Jane가 된다.

• 심지어 둔갑술도 가능하다!

let a = 1;
let b = 2;
// a에 바로 b를 넣어 버리면 a가 사라진다
let c= a;
// 그래서 c 를 만들어서 a를 넣어둔다.
[a, b] = [b, a];
// 구조 분해 할당으로 간단하게 만들면 이렇게 된다.

• 객체도 가능하다.

let user = {name: 'Mike', age: 30};
let {name, age} = user;
// 물론 키가 있기 때문에 name과 age의 순서가 바뀌어도 상관없다.
// 변수이름 name과 age도 바꿔버려도 된다.
let user = {
      name: 'Jane',
    age: 18,
      gender: 'female',
};
let {name, age, gender = 'male'} = user;
// 배열과 마찬가지로 기본값도 똑같이 사용 가능하다.
// 위의 경우, gender 에 기본값을 무시하고 객체의 값이 이미 있기 때문에 그것을 사용한다.

2. 리액트가 말하고자 하는 것

• 결국 리액트는 유저가 바꾼 데이터를 리액트 프로그램 자체도 인식을 하게 만드는 것을 원한다.
• 그래서 이것이 컴포넌트로 작동할 것이다.
• 최후에는 바뀐 데이터를 리액트가 알고 있으므로, 어느 위치에서든 가져와 쓸 수 있게 된다.

1. 리액트의 State

• 내부에서 변화 하는 값. 상태.
• 컴포넌트를 사용하는 중에 내부에서 변화하는 값 (일상 생활에서의 나이, 사는곳 등)
• 입력이 바뀌면 다시 리렌더링 하는것이다!

2. 리액트의 Props

• 외부로 부터 전달 받은 값.
• 바뀌지 않는 값 (일상생활에서의 이름이나 성별)
• 간단하게 말하면, 사용자가 절대 바꿔서는 안되는 값은 props 가 맞다. 가격이나 제품 이름 이런거 말이다.

3. 자주 사용하는 이벤트

• onChange : 무언가 값이 변경 될 때마다 이벤트가 발생한다.
• onClick : '클릭' 하면 이벤트 발생. 버튼이나 링크를 클릭 했을때 발생하는 이벤트이면 된다.
  • 이벤트 자체에 바로 함수를 호출하면 안된다! 그러면 컴포넌트가 렌더링 되자 마자 바로 실행되어 버린다. 외부에서 함수를 정의 했다면 이벤트 함수 자체를 전달하자. 즉, {}안에 () 를 뺀 함수 자체를 써주면 된다.
  • 아니면, 아에 리턴문 안에서 함수를 정의해 버리자.