인프런 커뮤니티 질문&답변

{segment === 'home' ?
    <>
    	<svg width={26} viewBox="0 0 24 24" aria-hidden="true"
        	className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e">
            	<g>
	                <path d="M12 1.696L.622 8.807l1.06 1.696L3 9.679V19.5C3 20.881 4.119 22 5.5 22h13c1.381 0 2.5-1.119 2.5-2.5V9.679l1.318.824 1.06-1.696L12 1.696zM12 16.5c-1.933 0-3.5-1.567-3.5-3.5s1.567-3.5 3.5-3.5 3.5 1.567 3.5 3.5-1.567 3.5-3.5 3.5z"></path>
                </g>
        </svg>
        <div style={{fontWeight: 'bold'}}>홈</div>
    </> :
    <>
    	<svg width={26} viewBox="0 0 24 24" aria-hidden="true"
        	className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e">
            	<g>
                	<path d="M12 9c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4zm0 6c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2zm0-13.304L.622 8.807l1.06 1.696L3 9.679V19.5C3 20.881 4.119 22 5.5 22h13c1.381 0 2.5-1.119 2.5-2.5V9.679l1.318.824 1.06-1.696L12 1.696zM19 19.5c0 .276-.224.5-.5.5h-13c-.276 0-.5-.224-.5-.5V8.429l7-4.375 7 4.375V19.5z"></path>
                </g>
        </svg>
        <div>홈</div>
    </>
}

강사님께서는 위 코드처럼 세그먼트에 따라 삼항연산자를 이용하여 아이콘이 들어있는 전체를 렌더링하셨는데요,

style={{fontWeight: segment === 'home' ? 'bold' : 'initial'}}

위 처럼 똑같이 삼항 연산자를 이용하되, style, svg path 등 필요한 부분만 유동적으로 변하도록 하지 않으신 특별한 이유가 있으신지 궁금합니다.