useEffect
functional component에는 class component에서 사용했던 life cycle method가 존재하지 않는다. 하지만 늘 그랬듯 대안은 존재한다!
바로 useEffect Hook을 사용하는 것이다.
import {userEffect} from "react"로 useEffect를 import 해준 뒤,
useEffect(()=>{})와 같은 형태로 함수를 작성한다.
콜백 함수 뒤의 부분에 아무것도 작성하지 않거나, 빈 배열을 작성하거나, 어떤 state가 업데이트 될 때 마다 사용할 것인지 해당 state가 담긴 배열을 작성해서 언제 실행이 되게 할 것인지 지정해준다.
Ex)
useEffect(()=>{}) => component가 계속해서 render 될 때마다
useEffect(()=>{},[]) => component가 처음 render 될 때
useEffect(()=>{},[state]) => state가 업데이트 될 때마다dangerouslySetInnerHTML
위키피디아 api를 사용하던 도중, 결과를 받아 화면에 뿌리는 과정에서 <span></span> 등의 태그가 그대로 노출되어 찾아본 방법이다.
dangerouslySetInnerHTML은 리액트에서 innerHTML에 대응되는 attribute로,
<Component dangerouslySetInnerHTML={{__html: results.data}} />등과 같이 사용할 수 있다.
다만 조심해야하는 점이 있는데, 이렇게 innerHTML을 설정해줄 경우 XSS 공격에 취약하다는 점이다.
XSS
XSS는 웹 해킹/공격 방법 중 하나로 게시판, 자바스크립트 등에 악성 코드를 삽입해 개발자가 고려하지 않은 기능이 작동하게 하는 등 일반적 사용을 방해하게 된다.
XSS 공격을 통해 쿠키, 세션스토리지 등에 저장되어있던 개인정보를 탈취할 수 있으므로 사용에 유의해야한다.
setTimeout으로 계속되는 api 호출 방어하기
input에 onChange 이벤트 리스너로 계속해서 새로운 api를 호출하는 경우를 생각해보자.
사용자가 한 글자 한 글자 작성할 때 마다 새롭게 api를 호출하게 될 것이고, 그렇게 되면 계속해서 많은 정보가 받아와지고 state가 재지정 되므로 굉장히 비효율적인 방식이 될 것이다.
이런 경우를 방지하고자 하는 경우 사용할 수 있는 메소드가 바로 setTimeout, clearTimeout 이다.
onChange 메소드 내부에 setTimeout을 작성, 그 내부에 api를 호출하도록 하고, return에 clearTimeout을 작성해 해당 setTimeout을 제거하도록 한다.
이렇게 작성하게 될 경우, setTimeout에서 지정한 딜레이 시간 이내에 다른 onChange 이벤트가 발생하면 => clearTimeout이 먼저 실행이 되어 이전에 저장되었던 setTimeout이 제거, api 호출이 다시 늦어지게 된다.
map에서 null값 return하기
Option-select 형식의 아코디언 컴포넌트를 만들 때 사용했던 방식이다.
내가 어떤 값을 select하게 되었을 경우, 그 값을 최상단에 위치하게 하고 그 밑에는 해당 셀렉트 값을 제외한 다른 값만 존재하게 할 때 작성했다.
state에 현재 셀렉트한 값을 저장하고, 다시 render가 되어 map이 호출 될 때 state에 저장되어있는 셀렉트 값과 map되는 엘리먼트의 값이 같으면 return null을 시킨다.
이렇게 하면 해당 엘리먼트는 빈값으로 리턴이 되어 원하는 레이아웃을 작성할 수 있게 된다 :)
