inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링

사이트 배포와 마무리

<> </> 의미

278

나는초보

작성한 질문수 7

1

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
...
    </>
  )
}

제가 놓쳤을수도 있는데, <> , </> 의미를 뒷부분에 설명한다고 했는데, 끝까지 설명이 안나온것 같습니다.

 

javascript react 리팩토링

답변 2

1

캡틴판교

안녕하세요, 아 네 요거는 제가 깜빡했네요 ㅋㅋ Fragment라고 하는 건데요. 요건 추가 영상 제공할게요 :)

Fragment는 논리적으로 UI를 표현하는데 도움을 주는 태그고 실제로 화면에 그려질 때는 아무 것도 그려지지 않습니다. 예를 들어서, 아래 코드는

<>
  <div>hi</div>
  <p>hello</p>
</>

화면에 최종적으로 요렇게 그려질 거예요.

<div>hi</div>
<p>hello</p>

리액트는 컴포넌트 루트 레벨에 태그가 하나만 있어야 하는데요. 요 규칙을 지키면서 UI를 다채롭게 표현하고 싶을 때 위와 같은 Fragment 문법을 사용합니다 :)

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

나는초보님, 질문하신 <></>는 React에서 Fragment를 나타내는 축약형입니다. JSX에서 여러 요소들을 반환할 때 이들을 하나의 요소로 묶어줘야 하는데, <div> 같은 추가적인 DOM 요소를 쓰지 않고 감싸주기 위해 사용합니다. 이렇게 함으로써 불필요한 요소의 추가 없이 목적에 맞게 요소들을 그룹화할 수 있습니다.

Auto-memory 기능

0

5

1

64강 context 7 관련 질문

0

7

1

Auto-memory 기능

0

11

0

55강 7분56초

0

8

0

55강 git 초기화 관련 질문이요

0

10

1

클로드 코드에 붙여넣기후 편집 관련 질문입니다!

0

14

1

존재하지 않는 일기 url입력 시 alert이 두 번 떠요

0

17

1

윈 터미널의 클로드와 에디터의 터미널의 클로드에 관한 질문

0

13

1

output-styles 명령어 없어 지지 않았나요?

0

14

1

[MISSION 7] 프로필 웹 Github 링크 제출하기 관련..

0

21

0

useState 직접 구현 부분에서 질문이 있습니다.

1

20

1

커서 클로드 코드 검색창 검색 시

0

17

1

학습을 하고 블로그에 정리를 해도 괜찮을까요?

1

23

1

/init 초기화 이유

0

26

1

Git commit 관련 질문

0

21

1

로컬스토리지 에러

0

113

1

state 변경에 따른 리랜더링 범위가 어떻게 되는 건가요?

1

362

2

콘솔 에뮬레이터 cmder이 회사 컴퓨터에서 차단 당해요

1

216

1

npm 대신 yarn

1

370

2

handler 정의시 const 로 정의하는것과 function으로 정의하는것 차이

1

820

2

질문있습니다 (SSR 빌드)

1

229

2

function vs const

2

318

1

컴포넌트 내부/외부에 선언하는 함수 차이

1

283

1

github 404 뜹니다~

1

253

1