TIL_CSS+, React

Today 공부

• Onblur (메소드)
• useRef
• Styled Component 와 React Component

---

Onblur

onBlur 커서를 다른 곳으로 이동할 때 발생하는 이벤트
참고

---

Styled Component

Styled Component 는 중첩 스타일링을 위해 SCSS 와 같은 전처리 기능을 자동으로 지원합니다. 중첩 스타일링을 하기 위해서는 ampersand(&) 기호를 사용하면 됩니다.

---

useRef (DOM reference를 잘 활용할 수 있는 useRef)

아래와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우

• focus
• text selection
• media playback
• 에니메이션 적용 등 DOM 기반 라이브러리 활용

• useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있다

---

const where = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
    <div>
      <input ref={where} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
        {/* where 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
        {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
    </div>
  );

---

이 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않습니다.

---

 function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

---

• useRef를 남용하는 것은 부적절 하고,
  React의 특징이자 장점인 선언적 프로그래밍 원칙과 배치되기 때문에 조심해서 사용해야 한다.

---

마치며,

스프린트를 진행하면서 useEffect 부분이 시간이 조금 지난뒤에 다시 사용하려니
순간적으로 사용법을 잊어 다시 복습을 하였다.
하루 복습하고 지나오게되면 잊어버리는거 같다.
지난 과제도 틈틈히 다시 보면서 리마인드 해야겠다.