[TDL] 07/28 Today's-Done-List

- leetcode 알고리즘 연결 리스트 문제 풀이

head, tail이 분리되어있고 그 후에 val가 오는 연결 리스트

class Node {
	constructor(val = null, prev = null, next = null) {
		this.val = val;
		this.prev = prev;
		this.next = next;
	}
}

class MyLinkedList {
	constructor() {
		this.head = new Node();
		this.tail = new Node();
		this.length = 0;
		this.head.next = this.tail;
		this.tail.prev = this.head;
	}

	get(idx) {
		if (idx < 0 || idx >= this.length) return -1;
		let curNode = this.head.next;
		while (idx--) curNode = curNode.next;
		return curNode.val;
	}
	addAtHead(val) {
		let prev = this.head;
		let next = this.head.next;
		let node = new Node(val, prev, next);

		prev.next = node;
		next.prev = node;
		this.length++;
	}
	addAtTail(val) {
		let prev = this.tail.prev;
		let next = this.tail;
		let node = new Node(val, prev, next);

		prev.next = node;
		next.prev = node;
		this.length++;
	}
	addAtIndex(idx, val) {
		if (idx < 0 || idx > this.length) return null;

		if (idx === this.length) {
			this.addAtTail(val);
			return;
		}

		let prev = this.head;
		while (idx--) prev = prev.next;
		let next = prev.next;
		let node = new Node(val, prev, next);

		prev.next = node;
		next.prev = node;

		this.length++;
	}
	deleteAtIndex(idx) {
		if (idx < 0 || idx >= this.length) return null;
		let prev = this.head;
		while (idx--) prev = prev.next;

		let next = prev.next.next;

		prev.next = next;
		next.prev = prev;
		this.length--;
	}
}

https://www.youtube.com/watch?v=up7-I0fdWqM

---

- 1분코딩 html5 canvas 강의

https://dev-minju.tistory.com/291?category=970123

---

오후 회고 (만족도: 8)

알고리즘 연결 리스트의 또 다른 구현 패턴? 디자인 패턴?을 보게 되어서 정말 혼란스럽다..
연결 리스트는 진짜 해도 해도 리스트들이 상상이 잘 안 되고 어렵다ㅠ 다른 문제를 풀면서 나만의 방식을 찾아보자!
요즘 canvas를 배우는 것이 매우 재미나다. 목표는 달성하지 못하였지만 집중도가 좋았기에 만족도 8점을 주고 싶다.

---

- 제로베이스 REACT 강의

forwardRef

ref 전달은 컴포넌트를 통해 자식 중 하나에 ref를 자동으로 전달하는 기법이다.
일반적으로 애플리케이션 대부분의 컴포넌트에 필요하지는 않지만, 재사용 가능한 컴포넌트 라이브러리와 같은 어떤 컴포넌트에서는 유용할 수 있다.

아래의 예에서 FancyButton은 React.forwardRef를 사용하여 전달된 ref를 얻고, 그것을 렌더링 되는 DOM button으로 전달합니다.

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 이제 DOM 버튼으로 ref를 작접 받을 수 있습니다.
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

이런 방법으로 FancyButton을 사용하는 컴포넌트들은 button DOM 노드에 대한 참조를 가져올 수 있고, 필요한 경우 DOM button을 직접 사용하는 것처럼 접근할 수 있다.

위의 예시에서 어떤 일이 일어나는지 단계별로 확인해보자.

1. React.createRef를 호출해서 React ref를 생성하고 ref 변수에 할당.
2. ref를 JSX 속성으로 지정해서 <FancyButton ref={ref}>로 전달.
3. React는 이 ref를 forwardRef 내부의 (props, ref) => ... 함수의 두 번째 인자로 전달.
4. 이 ref를 JSX 속성으로 지정해서 <button ref={ref}>으로 전달.
5. ref가 첨부되면 ref.current는 <button> DOM 노드를 가리키게 된다.

알아두기
두 번째 ref 인자는 React.forwardRef와 같이 호출된 컴포넌트를 정의했을 때에만 생성된다.
일반 함수나 클래스 컴포넌트는 ref 인자를 받지도 않고 props에서 사용할 수도 없다.
Ref 전달은 DOM 컴포넌트에만 한정적이지 않다. 클래스 컴포넌트 인스턴스에도 전달할 수 있다.

 

https://ko.reactjs.org/docs/forwarding-refs.html

Forwarding Refs – React

---

useRef

useRef() Hook은 DOM ref만을 위한 것이 아니다.
“ref” 객체는 현재 프로퍼티가 변경할 수 있고 어떤 값이든 보유할 수 있는 일반 컨테이너이다.
이는 class의 인스턴스 프로퍼티와 유사하다.

function Timer() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });

  // ...
}

useEffect 내부에서 쓸 수 있다.
인터벌을 이용한 데이터를 나타내고, 변경할 때 useState를 사용한다면 데이터가 바뀔 때마다 재 렌더링이 된다.
재 렌더링 시키고 싶지 않을 경우, useState대신 useRef를 사용하면 유용하다.

다시 말하자면, 컴포넌트 상태 값을 변경해주고 싶지만 리 렌더링 시키고 싶지 않을 때 useRef를 사용한다.

---

callbackRef

ref가 설정되고 해제되는 상황을 세세하게 다룰 수 있는 함수이다.

초기 렌더링 시 ref는 null인 상태이기에, 초기값을 넣어주거나 useState를 이용해서 DOM에서 데이터를 가져와서 넣어주어야 한다.

ref에 접근하기 위해 this.refs.textInput를 사용한다면, callback ref이나 createRef API를 대신 사용해야 한다.

React를 이전에 사용해 보셨다면 ref 어트리뷰트의 값이 "textInput"처럼 문자열이고, DOM 노드를 this.refs.textInput와 같이 접근하는 구식 API를 아시고 계실지도 모릅니다. 문자열 ref는 몇몇 문제를 가지고 있고, 레거시로 여겨지며, 차후 배포에서 삭제될 것으로 예상되기 때문에 권장되지 않습니다.

 

https://ko.reactjs.org/docs/refs-and-the-dom.html#callback-refs

Ref와 DOM – React

---

저녁 회고 (만족도: 7)

canvas 정리할 때 까진 집중이 잘 됐는데, 심화 ref를 학습하면서 집중이 깨졌다.
내일 오전에 마무리 정리해야 할 것 같음.

---