2022-7-15 : react / JS / TS

1. useRef

const CountRef = useRef<number>(0);

useEffect( () => {
    CountRef.current = Count;
}, [ Count ] )

- 다음과 같은 useRef 사용은 전역변수 let을 선언한 것과 비슷하다

- 그러므로 useEffect 등등 의존성을 필요한 훅에서는 의존성을 추가해줄 필요가 없다.

 

 

2. '?' 옵셔널 체이닝

const a = {}

a.b	// error
a?.b	// undefined

ex)
a?.b.length === 0
--->
a?.b?.length ===0

- 보안적 이득?

 

참고자료 : https://rootjang-dev.tistory.com/2

 

3. TS 변수 뒤의 느낌표 ( ! )

let x: number;

const function1 = () => {
    x=1
}

function1()

console.log(x+x);	// compile error

console.log(x! + x!);	// error resolve

- 위의 콘솔로그는 변수 x의 값이 할당되지 않았다고 에러 발생

- 하지만 변수 뒤에 느낌표( ! ) 붙여주면 변수의 x의 값이 있다는 걸 확신하게 되어 에러 해결

 

참고자료 : https://velog.io/@hojin9622/Typescript-%EB%B3%80%EC%88%98-%EB%92%A4%EC%9D%98-%EB%8A%90%EB%82%8C%ED%91%9C-%EC%82%AC%EC%9A%A9

 

4. React.DOM 엘리먼트에 텍스트 삽입하기

- innerHTML말고 dangerouslySetInnerHTML을 사용하자

- dangeouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법

- 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격 노출에 쉽다

- 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html키로 객체 전달

 

잘못된 예시

const App = () => {
   const str = () => {
       return <div>ㅋ</div>
   }
   
   return <div>{str()}</div>
}

 

사용 예시

const App = () => {
   const str = () => {
   		const a = "ㅋ";
       return <div dangerouslySetInnerHTML={{__html: a}}></div>
   }
   
   return <div>{str()}</div>
}

 

참고자료 : https://okayoon.tistory.com/entry/React-DOM%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8%EC%97%90-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0-innerHTML%EB%A7%90%EA%B3%A0-dangerouslySetInnerHTML%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

 

5. window.scrollY & 

- 스크롤 정보를 가져오는 방법

// 화면의 Y축의 상단 값
window.scrollY

// 화면의 Y축의 하단 값
window.scrollY + window.innerHeight

- 브라우저 호환성

: window.scrollY와 window.pageYOffset은 같은 속성이지만, 오래된 브라우저의 경우 window.scrollY 대신 window.pageYOffset만 지원

window.pageYOffset === window.scrollY;	//항상 true

 

6. Location 객체

Property	Description	Example
pathname	URL 경로 반환	/search
search	URL에 붙은 매개변수 반환(물음표 뒤의 값)	?q=devmo
hostname	URL의 도메인 반환	www.example.com