인프런 커뮤니티 질문&답변
작성한 질문수
추가로 Head tag에서 작성된 script 코드 관련하여 질문드리고 싶습니다. (feat. 즉시 실행 함수, dangerouslySetInnerHTML)
작성
·
122
1
안녕하세요 조은님! 앞서 작성했던 질문 글에 다 작성하며 너무 길어질 것 같아 이렇게 나눠서 적게 되었습니다 ㅎㅎ;
Q3.
강의에서 즉시 실행함수는 스코프를 제한해주기 위해서 사용한다고 이해를 했는데, 이건 혹시 모를 변수 중복 위험을 제한하기 위해서일까요??
이 외에도 강사님께서 즉시 실행 함수를 사용하는 일반적인 케이스나 즉시 실행함수를 사용하면 좋은 케이스들이 있다면 배워가고 싶습니다!
Q4.
추가로 dangerouslySetInnerHTML를 사용하는 이유에 대해서 여쭤보고 싶습니다!
제가 찾아봤을 때는 React에서 HTML 사용에 위험성을 알리기 위해서는 dangerouslySetInnerHTML를 사용해라. 라는 것까지는 확인을 했습니다! 하지만 기능적으로 특별한 기능을 하는 것 같지는 않은데.. dangerouslySetInnerHTML이 사용되는 다른 이유가 있을지에 대해 여쭤보고 싶습니다!
답변 2
0
안녕하세요. 우성님! 1, 2번 질문에 이어서 답변 드릴게요. 4번 - 3번 순서로 답변드리겠습니다.
A4. dangerouslySetInnerHTML를 사용하는 이유
dangerouslySetInnerHTML를 쓰지 않고 script 태그에 themeEffect의 로직을 넣어보면 답을 알 수 있습니다. 서버에서 렌더링하는 시점의 HTML과의 차이가 발생해 Error: Text content does not match server-rendered HTML. 에러를 만나게 됩니다.
Next.js 서버에서는 <script> 태그 안의 컨텐츠를 특수 문자를 엔티티로 이스케이프 처리합니다. 예를 들면 따옴표(')를 ' 이렇게 바꾸는거죠. 그 결과 브라우저에서 해석하는 결과와 차이가 생기는 것이죠. 반면 dangerouslySetInnerHTML을 사용하면 내용을 그대로 사용해 서버와 브라우저가 동일한 결과를 반환합니다.
때문에 dangerouslySetInnerHTML을 사용했습니다.
A3. 즉시 실행 함수를 사용한 이유
dangerouslySetInnerHTML를 사용할 수 밖에 없는 상황이라는 점을 감안했을 때 결국 __html에서 테마 설정을 바꿔야 합니다. 이때 선택지는 두개가 있습니다.
themeEffect와 같은 함수를 즉시 실행문자열로 모든
themeEffect함수 내의 로직을 적기
저는 남겨주신 스코프 제한의 이유 외에도 에디터에서 지원하는 하이라이트 기능의 사용 편의나 코드의 가독성 측면에서 즉시 실행 함수가 유리하다고 판단했습니다.
즉시 실행 함수를 쓰는 일이 잦은 편은 아닙니다. 예전에는 useEffect 내에서 비동기 함수를 호출할 때 async/await 문법을 쓰기 위해 async로 선언한 즉시 실행 함수를 쓰곤 했는데 TanStackQuery와 같은 좋은 도구가 나오면서 이런 방법을 잘 쓰진 않습니다. 테마 변경 기능에 쓰인게 특이한 사례라고 보셔도 괜찮을 거 같아요!
답변이 되셨으면 좋겠네요. 또 다른 질문 있다면 얼마든 편하게 남겨주세요!
열심히 하시는 모습 보기 좋습니다! 응원할게요!
0
안녕하세요, 인프런 AI 인턴입니다. 이우성님!
질문해주신 두 가지 주제에 대해 간단히 설명드리고 관련된 답변 링크를 추천해 드리겠습니다.
즉시 실행 함수의 사용 이유
즉시 실행 함수(IIFE)는 즉시 실행되어야 하는 코드를 위해 사용됩니다. 스코프를 제한하여 전역 스코프에 영향을 미치지 않고도 변수나 함수의 종속성을 관리하려는 경우 유용합니다. React 환경에서는 전역 스코프에서 선언되지 않도록 보호하기 위해 사용됩니다. 추가적인 예시로는 모듈 패턴에서 내부 데이터를 외부에 노출시키고 싶지 않을 때 유용하게 활용할 수 있습니다.
dangerouslySetInnerHTML의 사용 이유
React에서 dangerouslySetInnerHTML은 보안상 위험할 수 있는 HTML을 직접 삽입할 때 사용됩니다. 이는 XSS(Cross-Site Scripting) 공격을 방지하기 위한 React의 안전 장치이지만, 외부에서 가져온 HTML을 렌더링해야 할 경우 꼭 필요합니다. 사용 시에는 데이터의 신뢰성을 보장하는 것이 중요합니다.
아래 링크를 통해 보다 구체적인 응답을 확인해보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.