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

1. React SPA

• 옛날의 웹은 그냥 딱딱하게 정보를 전달 할 뿐이었다.
• 요즘의 앱은 상업적 가치를 가질만큼, 커졌고, 우리는 간단하게 이동하는 웹 에플리케이션을 만들 수 있게 되었다.
• 그중 오픈 소스인 React Router 가 대중화를 앞당겼다!

2. Router(라우터)

• 하나의 경로로 들어온 것들을 여러가지 경로로 나눠준다.
• 일명, 길을 정해주는 것. (길은 '주소' 가 되겠지. 그래서 그 주소를 바꿔주면서 로딩 없이 창이 열리게 된다.)

3. 라우터는 어떤 것들이 들어가 있는가

• BrowserRoute : 길을 정해 주는 친구
• Route : 길 그 자체
  • 뒤에 path를 붙여서 주소를 이동시킨다.
• Switch : Route로 감긴 컴포넌트 중에 한놈만 고른다. 말 그대로 스위치.
• Link : 이것도 그대로 링크.
  • 하지만 중요한건 같이 나오는 to => 이 쪽 주소로 보내라!
  • 'a'태그는 어울리지 않는다. 그 링크는 계속 로딩이 된다.
• exact: Route와 path 사이에 넣어주면, 그 주소가 아닌 다른 주소를 입력 받았을때 무시하고 정확한 그 주소만을 연결 시킨다.
  • 주소를 입력 받으면 뒤에서 앞으로 읽는다고 생각하면 편하다. 그렇기 때문에, 홈페이지의 주소가 '/' 일 경우 다른 페이지들과 주소가 겹쳐
    무조건 홈페이지만 나오게 된다. 이럴때 exact 로 정확한 홈페이지를 정해준다. 그래서 홈페이지 만들때 자주 쓰인다.

팁 : 뭔가 만들기 전에, 기본 틀을 그려보고, 필요한 기능을 적어놓고 시작하자. 훨씬 편하다. Figma 를 잘 사용하자.
우분투는 아직도 말성이다. 진짜 맥북 사야하나...
npm 오류를 해결중이다.
리액트 문법을 조금 더 정확히 알아야 한다.