좋은 질문이에요 👍
React 자체는 특별한 문자열 유틸을 제공하지 않지만, JS 기본 함수로 **“치환, 배열 분리, 포함 여부 검사”**는 거의 전부 해결할 수 있고, 실무에서는 이를 감싼 커스텀 유틸 함수를 만들어 두는 게 일반적입니다.
아래에 🔥 자주 쓰는 3가지 카테고리별 유틸을 정리해드릴게요:
✏️ 1. 문자열 치환 (replace / replaceAll)
// ✅ 단순 치환 (처음 하나만)
const result1 = "Hello World".replace("World", "React");
// → "Hello React"
// ✅ 모든 항목 치환 (replaceAll 또는 정규식)
const result2 = "apple banana apple".replaceAll("apple", "orange");
// → "orange banana orange"
const result3 = "apple banana apple".replace(/apple/g, "orange");
// → "orange banana orange"
// ✅ 여러 단어를 한 번에 치환 (객체 매핑 활용)
const replaceMap = (str, map) =>
str.replace(new RegExp(Object.keys(map).join("|"), "g"), (m) => map[m]);
console.log(replaceMap("I like red and blue", { red: "green", blue: "yellow" }));
// → I like green and yellow
✅ 팁: React에서 입력 값 전처리(공백 제거, 금칙어 치환 등)에도 자주 사용됩니다.
📚 2. 특정 문자열 기준으로 배열화 (split)
// ✅ 구분자로 배열 생성
const fruits = "apple,banana,orange".split(",");
// → ["apple", "banana", "orange"]
// ✅ 줄바꿈 기준으로 나누기
const lines = "1줄\n2줄\n3줄".split("\n");
// → ["1줄", "2줄", "3줄"]
// ✅ 정규식 활용 (공백/쉼표 모두 기준)
const words = "apple, banana orange".split(/[\s,]+/);
// → ["apple", "banana", "orange"]
// ✅ 특정 문자열 기준으로 앞뒤 나누기 (2개만)
const [before, after] = "title:React".split(":");
// before = "title", after = "React"
📌 실전 예:
서버에서 "A|B|C" 같은 문자열이 올 때 배열로 만들어 React map()으로 UI를 뿌리는 데 자주 쓰입니다.
🔍 3. 특정 문자열 포함 여부 / 위치 찾기
// ✅ 포함 여부 확인 (대소문자 구분)
"Hello React".includes("React"); // true
// ✅ 대소문자 무시 포함 확인
"Hello React".toLowerCase().includes("react"); // true
// ✅ 시작/끝 검사
"Hello React".startsWith("Hello"); // true
"Hello React".endsWith("React"); // true
// ✅ 위치 찾기 (indexOf / lastIndexOf)
"Hello React".indexOf("React"); // 6 (없으면 -1)
// ✅ 조건문 활용 예시
if ("apple banana".includes("banana")) {
console.log("🍌 포함됨!");
}
🧪 보너스: 응용 예제 (3가지 기능 조합)
아래는 실무에서 자주 쓰는 문자열 → 배열 → 검사 흐름 예시예요 👇
const csv = "id:1,name:John,age:20";
// ① 콤마로 나눠 배열로
const pairs = csv.split(",");
// ② 각 항목을 key:value 객체로 변환
const obj = Object.fromEntries(pairs.map(pair => pair.split(":")));
// → { id: "1", name: "John", age: "20" }
// ③ 특정 key 포함 여부 검사
if ("name" in obj) {
console.log(`이름: ${obj.name}`); // 이름: John
}
'REACT' 카테고리의 다른 글
| [REACT] fatch, axios 사용법 (0) | 2025.09.28 |
|---|---|
| [REACT] useEffect로 알아보기 (0) | 2025.09.28 |
| [REACT] USESTATE 변수관리법 (0) | 2025.09.28 |
| [REACT] 핵심특징 7가지 (0) | 2025.09.28 |
