html태그가 포함된 문자열 렌더링하기

위의 네모의 텍스트를 innerHTML로 추출한 뒤 그 상태값을 그대로 렌더링한 결과를 밑에 나타내고 있다

그런데 왜 태그를 html처럼 나타내지않고 그대로 문자열로 나타낼까?

궁금해서 찾아봤다

보안상의 이유

리액트 홈페이지에 따르면 cross-site scripting (XSS)공격을 막기 위해서라고 한다

DOM Elements – React

쉽게 스크립트를 화면상에 렌더링할 수 있게 된다면 페이지를 이용하는 사용자도 개발자 도구를 이용해서 스크립트를 넣을 수 있을 것이고

그것이 곧 취약점이 된다는 내용 이 취약점을 방지하기 위해 리액트에서는 html태그를 무조건 문자열로만 렌더링하게끔 설정되어있다

const App = ()=>{
    const test = `<h1>title</h1>`

    return (
        <>
            <div>
                {test}
            </div>
        </>
    );
}

이렇게 렌더링된다

dangerouslySetInnerHTML

이 경고를 무시하고 강제로 html태그를 렌더링하게 하는 옵션이 있는데 바로 dangerouslySetInnerHTML 이름에서도 위험함이 들어난다

태그에 속성값으로 넣어주는 건데 사용법은 아래와 같다

const App = ()=>{
    const test = `<h1>title</h1>`

    return (
        <>
            <div dangerouslySetInnerHTML={{__html:test}}>
                {test}
            </div>
        </>
    );
}

태그가 제대로 적용된 체로 렌더링된 것을 볼 수 있다

하지만 이런 취약점을 안고 프로젝트를 계속 진행할 순 없을 것 같았다

지금이야 내가 간단하게 하는 것이라 상관 없지만 나중에 실무에 들어갔을 때도 저런식으로 코드를 짤 순 없으니까

컴포넌트로 만들어버리기

리액트를 배우기 시작할 때 컴포넌트 매핑이라는 것을 배웠다

주로 ul태그 아래에 오는 li태그를 가진 컴포넌트를 다수 많들어야할 때

배열에 있는 데이터들을 map 함수를 이용해서 컴포넌트로 만든 뒤에 렌더링하는 기술이었는데

그때는 리렌더링 효율성을 위해서 key가 중요하다! key를 반드시 설정해주어야한다! 는 것 밖에 기억이 남지않았는데

다시보니 컴포넌트가 아닌 것들을 컴포넌트로 만들어주어서 렌더링하고 있었다

키를 설정하지 않으면 화내는 리액트.

 

위에서 처럼 애초에 문자열이 html태그를 포함하고 있다면 적용하기 어렵겠지만

그냥 문자열이라면 배열에 넣은 뒤에 태그를 포함시켜서 렌더링할 수 있다

const App = ()=>{
    const test = [`title`]

    const title = test.map(v=><h1 key={v}>{v}</h1>);

    return (
        <>
            <div >
                {title}
            </div>
        </>
    );
}