오라의 개발스토리

DOM에서 흔적을 지워라! <React.Fragment>

Orra.o — Tue, 10 Feb 2026 13:56:27 +0900

"알겠습니다! 저한테 맡겨주세요!"

헬리오스 탑은 리액트로 만들어졌습니다.

리액트는 UI를 구성하는 최소 단위인 컴포넌트들로 구성되어 있습니다.

이때 각각의 리액트 컴포넌트는 여러 요소를 그대로 반환할 수 없으며, 그렇기에 하나의 부모 요소로 묶어주어야 합니다.

예시를 살펴봅시다.

위와 같이 여러개의 JSX 요소를 그대로 반환하려고 하면,
리액트는 하나의 부모 요소가 필요하다는 오류를 발생시킵니다.

<div> 태그를 사용해 부모 요소로 묶어주었더니,
더 이상 오류가 발생하지 않습니다.

이제 HeliosTower.tsx 컴포넌트를 App.tsx에서 불러오면,
화면에 정상적으로 출력되는 것을 확인할 수 있습니다.

앗, 그런데 누군가 부모 <div> 태그에 css를 추가하는 장난을 쳐놨습니다.

<div> 태그에 빨간색 배경을 입혀서, 탑이 빨갛게 물들고 말았어요.

심지어 black-wrapper라고 스타일 클래스 이름을 지었으면서 red색깔로 물들이는 농락까지... (절대내실수가아님)

개발자 도구에서 DOM(Document Object Model) 구조를 확인해보면,

요소들을 감싸고 있는 부모 <div> 태그가 보입니다.

이렇게 계속 <div> 태그로 요소들을 감싸게 된다면, 누군가 쉽게 css를 추가해 탑의 모습과 구조를 엉망으로 만들거에요.

하지만 다행히도, 아예 DOM에 흔적을 남기지 않는 방법이 있어요.

바로, <Fragment> 를 사용하는 거예요!

Fragment로 감싼 요소들은 실제 DOM 결과물에 아무런 영향을 주지 않습니다.

리액트에서 흔히 사용하는 <> </> 문법이 <Fragment> </Fragment>의 축약형입니다.

Fragment로 엘리먼트를 그룹화하면 다른 컨테이너(<div> 등)으로 엘리먼트를 감싸는 경우와 달리,

레이아웃이나 스타일에 영향을 주지 않습니다.

Fragment 태그를 활용해 탑의 구조를 바꿔봅시다.

왼쪽은 정식 문법인 <React.Fragment>를,
오른쪽은 축약 문법인 <> </>를 사용해 태그를 감싸보았습니다.

개발자 도구에서 DOM 구조를 확인해보면,
두 경우 모두 실제 DOM에는 아무런 태그도 추가되지 않은 것을 볼 수 있습니다.

정말 실제 DOM에는 Fragment의 흔적이 전혀 남아 있지 않습니다!

그럼 항상 편하게 Fragment 축약 문법 <> </> 을 쓰면 되나요?

그렇다고 할 수 없습니다.

Fragment는 DOM에 흔적을 남기지 않기 때문에, 오히려 스타일을 남겨야 할 때는 적합하지 않습니다.

진짜 레이아웃이나 배경을 제대로 바꾸고 싶을 때는 아래 예시처럼 css를 적용할 수 있습니다.

아래와 같이 예쁘게 스타일이 적용된 것을 확인할 수 있습니다.

두 번째로, 축약형 <> </> 말고 <React.Fragment> </React.Fragment>를 사용해야 하는 때가 있습니다.

바로, key를 사용해야 하는 경우입니다.

리액트에서 반복을 통해 여러 요소들을 랜더링할 때는 각 요소에 key를 할당해야 합니다.

이때 key 할당은 축약형 문법 <> </> 에서는 할 수 없고, 정식 문법인 <Fragment> </Fragment> 에서만 가능합니다.

예시를 살펴봅시다!

export default function HeliosTower() {
    const floors = ['100층', '99층', '앨리베이터', '2층', '1층', '아랫마을 입구'];
    return (
        <>
            <h1>헬리오스 탑</h1>
            {floors.map(floor => (
                <>
                    <p>{floor}</p>
                    <button>이동버튼</button>
                </>
            ))}
        </>
    )
}

map 메서드를 활용해 floors 배열 안에 있는 각각의 값들을 렌더링 하고 있는데요,

현재 반복 렌더링되는 각각의 최상위 요소에 key값을 주지 않고 있습니다.

key값이 없으면 아래와 같이 Each child in a list should have a unique "key" prop 에러가 뜹니다.

map의 결과물로 Fragment 여러 개가 나올텐데, 이들을 서로 구분할 key가 없다면

추가 / 삭제 / 순서 변경 시에 상태가 꼬일 수 있습니다.

즉, 각 요소에 key를 할당해야 하는데, Fragment 축약형 <> </> 을 썼을 경우 key를 할당하지 못합니다.

이런 경우에는 정식 문법 <React.Fragment> </React.Fragment> 를 사용하거나, <div> </div> 태그를 사용하여

key값을 할당해 주어야 합니다.

수정한 코드를 살펴봅시다.

import React from "react";

export default function HeliosTower() {
    const floors = ['100층', '99층', '앨리베이터', '2층', '1층', '아랫마을 입구'];
    return (
        <>
            <h1>헬리오스 탑</h1>
            {floors.map((floor) => (
                <React.Fragment key={floor}>
                    <p>{floor}</p>
                    <button>이동버튼</button>
                </React.Fragment>
            ))}
        </>
    )
}

<React.Fragment key={floor}> 이 부분을 보시면 됩니다.

축약형 태그 대신, React.Fragment 정식 태그를 사용하여 각각의 요소에 임시로 floor 값을 키로 넣어주었습니다.

이제 에러 메세지가 나오지 않습니다!

정리해 볼까요?

Fragment는 여러 요소를 하나로 묶어야 할 때,
DOM에 불필요한 태그를 추가하지 않기 위한 도구입니다.

Fragment에는 기본 문법과 축약 문법이 존재합니다.

단순히 구조를 정리하는 용도라면 Fragment를,
레이아웃이나 스타일의 기준이 필요하다면
의미 있는 컨테이너 요소를 사용하는 것이 좋습니다.

다만 key를 사용해야 하는 경우에는
축약형 대신 정식 Fragment 문법이나
다른 컨테이너 요소를 사용해야 합니다.

✨ 프론트엔드 경험치 10xp 를 얻었습니다.✨

스코프 마을의 비밀 파헤치기 (var, let, const)

Orra.o — Wed, 4 Feb 2026 22:11:42 +0900

* 본 내용은 자바스크립트 딥다이브 13장, 15장을 학습한 내용입니다.

네 알겠습니다! 저한테 맡겨주세요!!

브루스 박사가 정리해 놓은 문서를 읽어보면서

var 키워드에 어떤 문제가 있고, 새로운 키워드 let과 const가 문제를 어떻게 해결해주는지 살펴봅시다.

스코프와 스코프 체인

스코프는 곧 '유효범위'입니다.

우선 알아야 할 것은 '함수 스코프와' '블록 스코프' 입니다.

이를 풀어서 생각하면 함수 범위 그리고 블록 범위가 되겠네요.

function funcScope() {
  console.log('함수 스코프입니다.');
}

funcScope();

↑ 위 코드는 블록 { } 이 함수로 감싸져 있습니다. 즉 이는 함수 스코프입니다.

{
    var myPostion = "빨간포션";
}

if (true) {
    var monster = "주황버섯";
    console.log(monster);
}

for (var i = 0; i < 3; i++) {
    console.log("현재 몬스터 번호:", i);
}

↑ 그 밖의 함수로 감싸져 있지 않은 다른 모든 블록 { } 으로 감싸져 있는 경우, 이는 블록 스코프입니다.

예를 들어 if 문, for 문, while 문, try/catch 문 등이 해당되겠네요.

함수 스코프든, 블록 스코프든 스코프는 자신만의 지역을 만듭니다. 이를 지역 스코프라고 합니다.

추가로, 블록이 중첩이 되어도 지역 스코프 안에 또 다른 지역 스코프가 생깁니다.

어느 지역에도 속하지 않는 코드 바깥쪽의 스코프는 전역 스코프라고 합니다.

전역에 변수를 선언한다면, 자연스럽게 이 변수는 전역 스코프를 갖게 되겠지요?

그럼 지역 스코프가 중요한 이유가 무엇일까요?

바로 변수를 참조할 수 있는 유효범위가 지역 스코프 내로 한정되기 때문입니다.

다음 예시를 살펴봐요.

var a = "global a";
var b = "global b";

function outer() {
    var c = "outer's local c";
    
    function inner() {
    	var d = "inner's local d";
    }
}

변수 a, b는 전역 스코프를 갖고

변수 c는 outer 함수 스코프(지역 스코프)를 갖고

변수 d는 inner 함수 스코프(지역 스코프)를 갖습니다.

또한, 위 코드에서는 현재 outer 함수 내에 inner 함수가 중첩되어 있어요.

여기서 스코프 체인이라는 개념을 짚고 넘어갑시다.

지역 스코프가 중첩될 때는 계층적으로 구조를 갖는데요, 쉽게 말해 여기서 outer 함수는 inner 함수의 상위 스코프라고 합니다.

그리고 outer 함수의 상위 스코프는 전역 스코프가 되겠네요.

중요한 점은, 변수를 참조할 때 자바스크립트 엔진이 스코프 체인을 통해 상위 스코프 방향으로 이동하면서 변수를 찾는다는 것이에요.

그럼 inner 스코프 안에서 변수 c를 참조할 수 있겠군요? 상위 스코프로 이동하면 되니까요!

저 사다리는 오직 올라갈 수밖에 없는 구조예요....

따라서 상위 스코프에서 선언한 변수는 하위 스코프에서 참조할 수 있지만

하위 스코프에서 선언한 변수는 상위 스코프에서 참조하지 못하겠네요.

전역에서 outer 스코프 안의 c 변수를 참조할 수는 없어요!

지역 스코프와 렉시컬 환경

지역 스코프가 중요한 이유,

바로 변수를 참조할 수 있는 유효범위가 지역 스코프 내로 한정되기 때문이었죠?

예시를 더 살펴봅시다.

다음 코드에서 각각 어떤 몬스터가 출력될까요?

var x = 'global monster';

function myFunc() {
    var x = 'local monster';
    console.log(x); // ① 어떤 몬스터가 출력될까요?
}

myFunc();

console.log(x); // ② 어떤 몬스터가 출력될까요?

console.log(x)를 맞딱뜨렸을 때, 자바스크립트 엔진은 두 개의 변수 x 중 어느 x를 참조해야 할 것인지를 결정하게 되는데요,

이를 식별자 결정이라고 합니다.

자바스크립트 엔진이 식별자 결정을 할 때면,

현재 코드가 어디서 실행되며, 주변에 어떤 코드가 있는지 ...를 파악하는데요, 이를 렉시컬 환경이라고 부릅니다.

즉, 위 예제에서 렉시컬 환경에 따라 myFunc() 함수 내부에서 선언된 x 변수는 myFunc() 함수 내부에서만 참조할 수 있고,

myFunc() 함수 외부에서는 참조할 수 없습니다. 따라서 ①번 콘솔에서는 local monster가 출력됩니다.

그럼 외부에서는 myFunc() 함수 안의 x 변수를 참조할 수 없으니

②번 콘솔에서는 전역에 선언된 x 변수인 global monster가 출력되겠군요!

와우 ~ 스코프 덕분에 같은 이름의 변수가 있어도 충돌이 일어나지 않네요. 스코프가 다르니까요.

그렇지만 같은 스코프 내에서는 절대 같은 변수 이름을 사용하면 안되겠지요?

~~평행세계엔 또 다른 내가 있을수도 있겠지만 같은 세계에서는 도플갱어를 마주치면 죽잖아요..~~

⚠️충돌⚠️이 일어나서 오류가 발생할거에요.

그런데 말입니다.

function myFunc() {
    var x = 1;
    var x = 2;
    console.log(x); // 멀쩡하게 2 출력!
}
myFunc();

어라라라라라..? 같은 스코프 내에서 같은 변수를 썼는데 에러가 안 나네요?

아하, 이것이 var 변수의 문제점이군요!

좋아요, var 변수의 문제점을 정리해 봅시다.

var 키워드로 선언한 변수의 문제점

우선 방금 발견한 첫번째 문제점은

"var 키워드로 선언한 변수는 중복 선언이 가능하다" 입니다.

이때 나중에 선언한 변수로 인해, 이전 선언된 변수의 값이 변경되는 부작용이 발생합니다.

var x = 1;
var x = 100;

console.log(x); // 100 출력

그런데, 문제가 이것뿐만이 아니에요.

아까 함수 스코프와 블록 스코프 모두 지역 스코프이기 때문에 변수를 참조할 수 있는 유효범위가 지역 스코프 내로 한정된다고 했죠?

var monster = '주황버섯';

if (true) {
    var monster = '초록버섯';
    console.log(monster); // 초록버섯 (오케이)
}

console.log(monster); // 초록버섯 (오잉???)

위 코드를 살펴봅시다. 분명 if문도 블록 스코프인 지역 스코프를 가집니다.

그럼 마지막 줄 콘솔에서 monster를 출력했을 때

if문 안에서의 monster 변수를 참조할 수가 없을텐데 말이죠

지역 스코프 안의 초록버섯이 아니라 전역 스코프의 주황버섯으로 출력되어야 하는거 아닌가요?

아하, 이것이 두번째 문제점이군요. var은 함수 레벨의 스코프는 잘 먹히지만, 블록 레벨의 스코프는 먹히지 않아요..

아무래도 말썽꾸러기 var 키워드는 함수로 묶어진 지역 스코프인

function myFunc ( ) { ... } → 이러한 형태로만 가둬둘 수 있나봐요..

두번째 문제점 정리 :

"var 키워드로 선언한 변수는 오직 함수 스코프만을 지역 스코프로 인정한다."

우리에게는 1. 중복 선언이 되지 않으면서 2. 모든 지역 스코프에서 얌전히 가둬둘 수 있는 새로운 변수가 필요해요!

브루스 박사님이 새롭게 연구한 let, const 변수가 이를 해결해줄거에요.

let, const 키워드로 var 키워드의 문제를 해결하자!

정말 문제가 해결이 되는지 let 키워드로 중복 선언을 해봅시다.

let monster = "주황버섯"
let monster = "초록버섯" //   SyntaxError: Identifier 'monster' has already been declared

var 키워드로 중복선언했을 때는 에러가 나지 않고 새롭게 덮어씌워졌었는데,

let 키워드로 중복선언을 하니까 에러가 나네요!

그럼 블록 레벨 스코프가 먹히지 않았던 var 키워드의 문제도 let 키워드가 해결하는지 한번 테스트 해봅시다.

let monster = '주황버섯';

{
    let monster = '초록버섯';
    let postion = '빨간물약';
}

console.log(monster); // 주황버섯
console.log(postion); //   ReferenceError: postion is not defined

오호, let 키워드로 선언된 변수는 블록 레벨 스코프가 잘 먹히는군요!

전역에서 코드 블록 내의 postion 변수에 접근할 수 없어요.

엇, 근데 브루스 박사님은 두 개의 키워드를 주셨어요.

const 키워드가 있었죠. 그럼 let 키워드와 const 키워드의 차이는 무엇일까요?

우선 그 전에 선언과 초기화의 개념을 간단하게 알아둡시다.

쉽게 말해 선언은 변수를 등록하는 것, 초기화는 변수에 값을 할당하는 것입니다.

// 선언
let monster;

// 초기화
monster = '주황버섯'

// 한번에 선언과 초기화하기
let monster = '주황버섯'

쉽죠? 선언과 초기화는 변수 호이스팅 개념과 밀접하게 연결됩니다.

⬇️ 자세한 내용은 변수 호이스팅 글에서 다뤄볼게요!

<아직 안씀>

let 키워드와 const 키워드의 차이를 알아보자!

그럼 각각의 키워드로 변수를 선언해 봅시다.

var monster;
let postion;
const skill; //  SyntaxError: Missing initializer in const declaration

오잉! const 키워드에서만 에러가 납니다.

const skill = '여제의축복';

그런데 선언과 동시에 초기화를 해주면 에러가 나지 않네요!

알아둡시다.

1. const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.

근데 바로 위 예제 코드에서 저는 장착 스킬을 바꾸고 싶어요.

저는 여제의축복에서 스피드듀얼샷으로 바꿀래요.

const skill = '여제의축복';
skill = '스피드듀얼샷'; //  TypeError: Assignment to constant variable.

오잉! 스킬을 바꾸려고 했을 뿐인데 에러가 나네요.

그렇군요. const 키워드로 선언한 변수는 재할당을 할 수 없어요.

var 키워드, let 키워드는 재할당이 가능하지만, const 키워드는 불가능해요.

알아둡시다.

2. const 키워드로 선언한 변수는 재할당이 금지된다.

그렇지만 재할당이 안될 뿐, 원래 선언된 변수가 값을 변경할 수 있는 값이라면 (객체같이)

재할당 없이 접근하여 값을 변경할 수 있어요.

const monster = {
    name: '주황버섯',
    level: 8,
    damage: 42
};

monster.damage = 100;

위 예제 코드의 경우, 몬스터의 damage가 42 → 100으로 잘 바뀐답니다.

그렇지만 몬스터 변수에 새로운 객체를 할당했다면 에러가 났을거에요.

자바스크립트는 렉시컬 스코프를 따른다!

마지막으로 짚고 넘어갈 개념은 렉시컬 스코프(정적 스코프)예요.

다음 코드를 한번 살펴봅시다.

let monster = '주황버섯';

const myFuncOne = () => {
    let monster = '초록버섯';
    myFuncTwo();
}

const myFuncTwo = () => {
    console.log(monster);
}

myFuncOne(); // 초록버섯일까요 주황버섯일까요

화살표 함수 myFuncOne 안에서 myFuncTwo 함수를 호출하고 있어요.

그럼 myFuncOne 함수 호출 시에(마지막줄 코드 참고) myFuncTwo 함수가 실행되고, 변수 monster의 할당된 값을 출력해야 합니다.

여기서 살짝 헷갈릴 수 있는데요. 그럼 myFuncTwo 함수의 상위 스코프는

myFuncOne 함수 스코프일까요 아니면 전역 스코프일까요?

상위 스코프가 myFuncOne 함수 스코프라면 초록버섯을,

상위 스코프가 전역 스코프라면 주황버섯을 출력할거에요.

이때, 두 가지의 결정 방법이 있어요.

1. 함수 호출 위치에 따라 결정한다면?

--> myFuncOne 안에서 호출했으니 상위 스코프는 myFuncOne이겠네요.

첫번째 방식을 동적 스코프라고 합니다.

함수가 호출되는 시점에 동적으로 상위 스코프를 결정합니다.

2. 함수 정의 위치에 따라 결정한다면?

--> myFuncTwo 함수는 전역에 정의되어 있으니 상위 스코프는 전역이겠네요.

두번째 방식은 렉시컬 스코프 또는 정적 스코프라고 합니다.

함수 정의가 평가되는 시점에 이미 상위 스코프가 결정됩니다.

두 방법 중, 자바스크립트는 렉시컬 스코프를 따릅니다.

따라서 함수의 호출 위치가 아닌!!! 함수를 어디서 정의했는지에 따라 상위 스코프를 결정합니다.

호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않아요.

함수가 정의될 때 생성된 함수 객체는 자신의 상위 스코프를 기억해 두고, 함수가 호출될 때 그 상위 스코프를 참조하는 것이죠.

마무리를 해볼까요?

우리는 스코프와 스코프 체인이 어떻게 동작하는지 알아보았고

중복 선언이 된다든지, 함수 스코프만 지역 스코프로 인정하는 var 키워드의 문제점을 파악했어요.

그리고 이 문제점을 해결하기 위한 새로운 키워드 let과 const의 차이까지 알아보았어요!

마지막으로 자바스크립트가 렉시컬 스코프를 따른다는 것까지 알았네요.

휴.. 이렇게 브루스 박사님의 부탁을 무사히 마친거 같네요!

✨ 프론트엔드 경험치 30xp 를 얻었습니다.✨

독서는 마음의 양식

Orra.o — Mon, 2 Feb 2026 00:15:05 +0900

고작 만원, 이만원 남짓으로 다른 세계를 경험할 수 있다는 것은 얼마나 값싼 값어치인가.
올해도 더욱 다양한 세계들에, 그리고 깊게 빠질 수 있는 내가 되길 바라며.

오늘 개발 티스토리를 만들었는데, 소소하게 독서 카테고리도 하나 만들었다.

읽은 책들 한권 한권을 짧게라도 여기에 기록해 두어야겠다.

내가 빠졌던 세계를 기록하는 것은 모험가로서의 본분이다.

개발을 하더라도, 혹은 어떠한 다른 일을 하더라도 독서는 중요하다고 생각한다.

독서는 인간 영혼의 깊이를 만들어 준다.

아무리 자신의 분야에서 똑똑해도, 영혼의 깊이가 얕다면 사람들을 깊이 끌어당기기 어렵다.

나는 똑똑한 사람보다도 깊이 있는 사람이 되고 싶다.