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 부분이 시간이 조금 지난뒤에 다시 사용하려니
순간적으로 사용법을 잊어 다시 복습을 하였다.
하루 복습하고 지나오게되면 잊어버리는거 같다.
지난 과제도 틈틈히 다시 보면서 리마인드 해야겠다.