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를 이용한다!