📌 1. 기본 개념

🔹 replace() — 문자열 치환

  • 문자열(String) 에서 특정 부분을 다른 문자열로 교체
  • 원본 문자열은 변화 없음 → 새 문자열 반환
  • DOM과 무관
const str = "Hello World";
const result = str.replace("World", "JS");
console.log(result); // Hello JS

🔹 textContent — DOM 순수 텍스트 처리

  • HTML 요소 내부의 텍스트를 가져오거나 변경
  • HTML 태그를 무시하고 텍스트만 처리
  • 변경 시 DOM 렌더링 발생
const el = document.querySelector('.title');
el.textContent = "변경된 텍스트";

🔹 innerText — 렌더링된 텍스트 기반 처리

  • CSS 렌더링 기준으로 “보이는 텍스트” 처리
  • 숨겨진 요소(display:none)는 텍스트에서 제외
  • 렌더링 계산(reflow) 발생 → 세 개 중 가장 느림
const el = document.querySelector('.msg');
console.log(el.innerText);

📌 2. 성능 비교

구분 replace() textContent innerText
성능 가장 빠름 빠름 가장 느림
DOM 렌더링 없음 있음 있음 + reflow 발생
용도 문자열 내부 치환 UI 텍스트 변경 화면에 보이는 텍스트 사용

📌 3. 언제 무엇을 써야 하나?

✔ replace() 사용할 때

  • 문자열 가공, 데이터 처리
  • 단어 치환, 특수문자 정리

예:

const clean = name.replace("님", "");

✔ textContent 사용할 때

  • DOM 텍스트 업데이트 (UI 렌더링)
  • HTML 태그 없이 순수 텍스트만 다룰 때
  • XSS 걱정 없이 안전하게 텍스트 표시

예:

msg.textContent = "로그인 성공";

✔ innerText 사용할 때

  • 실제 화면에 “보이는” 텍스트 필요할 때
  • CSS 영향을 고려해야 할 때
    • 예: visibility, display 등

예:

console.log(el.innerText);  // 화면에서 보이는 텍스트 기준

📌 4. replace + textContent 함께 사용하는 패턴 (실무에서 매우 많이 씀)

DOM 텍스트 일부만 바꿀 때:

const el = document.querySelector('.msg');
el.textContent = el.textContent.replace("오류", "정상");

📌 5. 전체 비교 테이블

구분 replace() textContent innerText
적용 대상 문자열(String) DOM 요소 DOM 요소
기능 문자열 일부 치환 요소 안의 순수 텍스트 전체 읽기/쓰기 요소 안의 렌더링된 텍스트 읽기/쓰기
HTML 태그 처리 텍스트로만 처리 HTML 태그 무시 HTML 태그 무시 + CSS 렌더링 반영
줄바꿈 처리 문자열 그대로 HTML 줄바꿈 무시 실제 화면처럼 줄바꿈 반영
숨김 요소 처리 관련 없음 숨김 요소도 포함 숨김 요소 텍스트 제외
DOM 렌더링 비용 없음 (가장 빠름) 있음 (빠름) 있음 + reflow (가장 느림)
대표적 사용 목적 데이터 전처리, 단어 치환 UI 텍스트 넣기 화면 기준 텍스트 읽기
XSS 위험 여부 없음 없음 없음
반환/설정 방식 새 문자열 반환 읽기/쓰기 읽기/쓰기
CSS 영향 없음 없음 있음
예시 코드 "hi".replace("h","H") el.textContent = "변경" el.innerText = "변경"

📌 6. 핵심 요약

✔ replace()

  • 문자열 전용
  • DOM 접근 없음
  • 가장 빠름

✔ textContent

  • DOM 순수 텍스트
  • 안전한 텍스트 변경
  • UI 업데이트에 최적

✔ innerText

  • 화면에 보이는 텍스트 기준
  • CSS 반영
  • 가장 속도 느림

필요하시면 추가로 innerHTML까지 포함한 4종 비교표도 만들어 드릴게요!