inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

게시글 해시태그 링크로 만들기

react내에서 map함수에 대한 질문

225

NOAH

작성한 질문수 48

0

뜬금없는 질문일수도있는데요. 그 map함수가 원래 배열에 대해서 callback 함수에 대한 작업을 하고 새로이 배열을 return 해주는 메소드로 알고있습니다.

보통 react에서 JSX나 반복작업을 할 때 map을 사용하는데요.  아래 부분은 nodebird에서 해쉬태그를 만들어주는 부분이구요.

해쉬태그가 없던 있던간에 .. 예를들면 map에서 return이

[135 135]

['#135', '#123', 123 543]

이런식으로 되면.. html에서 <div>['#135', '#123', 123 543]</div>

이런식으로 나와서 문제가 생기는거 아닌가요? 그동안 생각을 안해보고 쓰긴했는데 곰곰히 생각해보니 배열을 return해주는데 배열은 표시가 안되고 <div>'#135', '#123', 123 543</div> 이런식으로 잘 출력이 되고...

JSX 같은 경우에도 배열 없이 태그만 딱 잘 나오더라고요.

react에서 map을 쓸 경우에는 배열말고 안에 내용물만 return 하도록 그렇게 라이브러리 적으로 설정이 되어있는 걸까요?

 

function PostCardContent({ postData }) {
  return (
    <div>
      {postData.split(/(#[^\s#]+)/g).map((vi=> {
        if (v.match(/(#[^\s#]+)/)) {
          return (
            // eslint-disable-next-line react/no-array-index-key
            <Link href={`/hashtag/${v.slice(1)}`} key={i}>
              <a>{v}</a>
            </Link>
          );
        }
        return v;
      })}
    </div>
  );
}

redux nodejs react express Next.js

답변 1

1

제로초(조현영)

네 배열이 들어있으면 그 내용물만 렌더링합니다.

넥스트 버젼 질문

0

90

2

로그인시 401 Unauthorized 오류가 뜹니다

0

104

1

무한 스크롤 중 스크롤 튐 현상

0

192

1

특정 페이지 접근을 막고 싶을 때

0

116

2

createGlobalStyle의 위치와 영향범위

0

102

2

인라인 스타일 리렌더링 관련

0

97

2

vsc 에서 npm init 설치시 오류

0

157

2

nextjs 15버전 사용 가능할까요?

0

166

1

화면 새로고침 문의

0

129

1

RTK에서 draft, state 차이가 있나요?

0

160

2

Next 14 사용해도 될까요?

0

455

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

358

1

url 오류 질문있습니다

0

214

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

391

1

sudo certbot --nginx 에러

0

1293

2

Minified React error 콘솔에러 (hydrate)

0

477

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

255

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

337

1

npm run build 에러

0

525

1

front 서버 npm run build 중에 발생한 에러들

0

398

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

350

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

290

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

249

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

206

1