6. 조건부 렌더링 · GitBook

undefined

https://react.vlpt.us/basic/06-conditional-rendering.html

Jul 04 '19 04:07 utterances-bot

강의가 시작되고 코드가 나오는 부분에서 이전 내용이 짤린 것 같은 느낌이 드는데, 강의하신대로 편집된 강의인가요??

Jul 04 '19 04:07 ivvve

@ivvve 앗! 내용이 짤렸군요! 다음주 월요일 쯤에 영상이 교체될 예정입니다. 알려주셔서 정말 감사합니다!!

Jul 06 '19 08:07 velopert

영상 수정이 안된거 같아요 확인 부탁드려요

Jul 15 '19 08:07 sonar3

'cildren' is not fined 라는 문구로 실행되지가 않습니다. jsx 의 버전문제일까요?

Jan 05 '21 22:01 CHANG-HUN-AN

@CHANG-HUN-AN 님 children 으로 h 가 빠졌어요

Jan 13 '21 03:01 lacomparte

javascript에서는 null,false,undefined를 렌더링 하면 아무것도 나타나지 않는다.

삼항연산자를 이용해 조건부 렌더링을 할 수 있다.

    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name}
    </div>

&&를 사용하자

    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>

&&를 사용하면 첫번째로 나오는 false값을 반환하며 없다면 마지막 값을 반환한다.

Jun 22 '21 13:06 wenodev

감사합니다!!

Aug 07 '21 11:08 jody96

삼항연산자를 사용한 조건부 렌더링 (주로 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용) JSX 에서 null, false, undefined 를 렌더링하게 된다면 아무것도 나타나지 않음 보여주고 숨기고의 단순한 처리라면 && 연산자를 사용해서 처리

*단축 평가 논리 계산법 console.log(true && 'hello'); // hello console.log(false && 'hello'); // false console.log('hello' && 'bye'); // bye console.log(null && 'hello'); // null console.log(undefined && 'hello'); // undefined console.log('' && 'hello'); // '' console.log(0 && 'hello'); // 0 console.log(1 && 'hello'); // hello

props 값 설정을 생략하면 ={true} 나 마찬가지

Sep 25 '21 07:09 sshusshu

wow

Aug 11 '22 10:08 choyccc

대박이네요 이거,,, 리엑트 시작한지 얼마 안됬지만 ,, 천천히 음미하면서 하는중인데 내일되면 까먹겠지만 이해가 쏙쏙되네요

Mar 10 '23 10:03 ITK-SHIN

안녕하세요 한가지 궁금한게 있는데요, &&를 사용하면서 그 조건이 false 일때는 "false"값이 적혀 나올수도 있나요?? 예를 들면 아래에서 "false 안녕하세요" 라고 출력이 될수도 있는걸지 궁금해서요..!

{isSpecial && *} 안녕하세요

May 30 '23 01:05 diayeri

(위에 붙여놓은 예시코드가 잘 보여지지 않아서 다시 코멘트 남겨요)

    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
      안녕하세요
    </div>

May 30 '23 04:05 diayeri

react-tutorial react-tutorial copied to clipboard