1) ref값이 변하여도 컴포넌트를 리렌더링 하지 않는다. 2) 컴포턴드가 리렌더링를 해도 ref 값은 변하지 않고 유저가 직접 변경해야 한다. 3) ref는 HTML DOM element를 직접 조종할수있다

1) ref 값이 변경해도 컴포넌트는 리렌더링 되지 않는다 위에 코드를 돌려본다면, 라인6 콘솔이 처음에만 프린트 되고, 버튼을 클릭해도 카운터 컴포넌트가 리렌더링 되지 않는것을 알수있다. 그리고 라인18에 텍스트도 Clicked 0 times ! 로 넘버가 0에서 부터 업데이트 되지 않는것을 볼수있다. 그 이유는 컴포넌트가 ref값이 변경되어도 컴포넌트를 리렌더링 하지 않기 때문이다.

2) 컴포넌트가 리렌더링을 하여도 ref값은 초기화 되지 않고 이전 렌더링의 값을 유지한다 위에 코드는 버튼 2개를 만들어 첫번째 버튼은 ref를 두번째 버튼은 스테이트를 사용하여 버튼이 클릭될때마다 값을 1씩 증가한다. 첫번째 버튼을 3번정도 클릭하고 두번째 버튼을 클릭해서 라인18 콘솔을 보면 Updating state 1 times! while ref is 3 프린트된걸 볼수있다. ref의 값은 컴포넌트가 리렌더링 되어도 값이 변하지 않고 유저가 직접 변경할수 있는것을 볼수있다. 스테이트라면 직접 변경하지 못하지 못한다. 예 위에 코드에서 counter = counter + 1 을 하여 변경하지 못한다.

*따라서 ref의 값이나 행동은 스테이트와 달리 컴포넌트와 연결되어있지 않다. *

3) ref는 HTML DOM element를 직접 조종할수있다 위 코드는 Form 컴포넌트가 렌더링을 끝나면 브라우저 포커스가 input element에 있는것을 볼수있다. 리액트는 이런 DOM element 조종을 허용하지 않지만 특수한 케이스를 위해 ref사용시 유저가 직접 조종할수 있는 방법도 제공하고 있는것이다.

그럼 forwardRef는 언제 쓰는걸까?

forwardRef는 ref를 자식 컴포넌트에 제공할때 사용한다. 왜냐하면 자식 컴포넌트의 HTML DOM에 접근할수 없기 때문이다

Form 컴포넌트는 버튼과 Input 컴포넌트를 자식으로 리턴한다. 버튼이 클릭되면, Input컴포턴트에 포커스가 맞쳐지는 것이다. 이때 Form component는 Input component의 HTML DOM 에 접근하여 포커스를 맞추는 방법이 없다. 이리 하여, ref는 부모인 Form component에서 생성하여, DOM을 접근하고 싶은 자식 컴포넌트인 Input에 넣어준다. Input은 forwardRef함수로 인하여 props과 또하나의 인수를 받는다 이것이 부모 컴포턴트에서 생성되고 패스된 ref(부모에선 inputRef로 생성 하여 자식에게 ref로 패스해줌)이다. 그리고 패스된 ref를 html dom element인 <input/> 에 넣어주어 dom을 직접 조작할수 있게 하였다.

리액트 레포지터리에 있는 코드를 보면 알수있다.

그래서 컴포넌트가 리렌더를 하여도, 디펜던씨 리스트에 넣어진 변수들의 밸류값이 변하지 않으면 이전 함수콜에 저장된 prevState[0] 콜백을 리턴하여 컴포턴트가 렌더 할때마다 비싼게 계산되는 함수가 다시 계산되지 않고 전에 저장한 함수로 다시 쓰는것이다. ( prevState 는 hook.memoizedState 에서 온값이다. const prevState = hook.memoizedState. hook.memoizedState 는 무엇을 저장하는 지 알고 싶으면 라인 15을 보면 알수 있다.

useCallback 은 컴포넌트가 렌더할때마다 콜이 되는 useEffect와 이런점에 서 다른것을 알수 있다. useEffect는 컴포넌트가 리렌더링할때와 디펜던시 변수가 변함에 때라 콜이 되기 때문이다.

Observables are a pattern for dealing with asynchronous data streams, similar to the way that arrays deal with synchronous data collections. An Observable is like a stream which can emit multiple values over time, and can also be cancelled. Observables are often used with the RxJS library in Angular applications, but they can also be used with other libraries or on their own.

Promises, on the other hand, are a pattern for handling asynchronous operations that return a single value at some point in the future. A Promise represents the result of an asynchronous operation, and provides a way to register callbacks to be executed when the asynchronous operation completes. Promises are a built-in feature of JavaScript, and are widely used for handling asynchronous operations in many JavaScript libraries and frameworks.

In summary, Observables are a way to handle multiple values over time, whereas Promises are a way to handle a single value that will be available at some point in the future.

In JavaScript, an observable is a type of object that can emit a stream of values over time. Observables are often used for asynchronous programming tasks, such as making network requests or handling user input.

A promise, on the other hand, is a special type of object that represents the result of an asynchronous operation. A promise can be in one of three states: pending, fulfilled, or rejected. When a promise is created, it is in the pending state. Once the asynchronous operation is completed, the promise is either fulfilled with a value or rejected with an error.

One key difference between observables and promises is that observables can emit multiple values over time, while a promise can only be fulfilled or rejected once. Observables also have a wider range of operator methods available, such as map, filter, and reduce, which can be used to transform or manipulate the stream of values emitted by the observable.

Here is an example of using an observable to emit a stream of values:

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next(x) { console.log('got value ' + x); },
  error(err) { console.error('something wrong occurred: ' + err); },
  complete() { console.log('done'); }
});
console.log('just after subscribe');

Output:

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

And here is an example of using a promise to handle the result of an asynchronous operation:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('done'), 1000);
});

promise.then(
  result => console.log(result),
  error => console.log(error)
);

Output:

done

What is of() ?

of() turns any plain value into an observable. It can be one than one types of value and any number of values.

import { of } from 'rxjs'

const numbers = [ 1, 2, 3, 4, 5]
const numberObservable = of(numbers)
numberObservable.subscribe(number => console.log(number))
// outputs...
// 1
// 2
// 3
// 4
// 5


const mixSource = of({ age: 14 }, [ 1 ,2, 3 ], function hello() { return 'Hello'})
mixSource.subscribe(source => console.log(source))
// outpus...
// { age : 14 }
// [ 1, 2, 3]
// function hello() { return 'Hello' }

As you can see in the example that it doesnt run any function that is fed as a source but just spits them out from the subscription.