<div id="readability-page-1" class="page"><div id="main" role="main">
  
  



  <article class="page" itemscope="" itemtype="https://schema.org/CreativeWork">
    <meta itemprop="headline" content="react에서 CSS display none을 쓰면 어떤 일이?">
    <meta itemprop="description" content="display: block -> display: none이 된 component는">
    <meta itemprop="datePublished" content="2021-10-25T11:43:30+00:00">
    

    <div>
      
        <header>
          
          

  <p>
    

    

    
      
      

      <span>
        
        
          less than 1 minute read
        
      </span>
    
  </p>


        </header>
      

      <section itemprop="text">
        
        <h2 id="display-block---display-none이-된-component는">display: block -&gt; display: none이 된 component는</h2>

<ol>
  <li>렌더링되지 않는다</li>
  <li>DOM tree에는 보인다</li>
  <li>React devtools Component tab에는 보인다</li>
  <li>component는 destroy 되지 않는다
    <ol>
      <li>component는 계속 유지된다</li>
      <li>component는 하던 일을 계속 한다</li>
      <li>useEffect의 return은 실행되지 않는다</li>
    </ol>
  </li>
</ol>

<hr>

<h2 id="그렇다면-dislpay-none이-초기값인-component는">그렇다면 dislpay: none이 초기값인 component는?</h2>

<p>display: block -&gt; none이 될 때와 마찬가지로</p>

<ol>
  <li>렌더링되지 않는다</li>
  <li>DOM tree에는 보인다</li>
  <li>React devtools Component tab에는 보인다</li>
  <li>component는 일을 한다
    <ol>
      <li>useEffect가 실행된다</li>
    </ol>
  </li>
</ol>

<hr>

<h2 id="결론">결론</h2>

<ol>
  <li>React의 functional component는 React element를 return 한다.
    <ol>
      <li>React element는 CSS display property가 block이든 none이든 상관없이 return한다</li>
      <li>이 단계에서 side effect도 모두 실행된다</li>
    </ol>
  </li>
  <li>브라우저는 return 된 React element를 사용하여 DOM tree와 CSSOM tree를 만든다
    <ol>
      <li>Rendering tree를 만들 때 display: none인 element는 빠진다</li>
      <li>React는 이 단계에서 아무 역할도 하지 않는다</li>
    </ol>
  </li>
</ol>

<hr>

<h2 id="예제-코드">예제 코드</h2>

<p>https://codesandbox.io/s/react-style-display-none-jf32k?file=/src/App.tsx</p>

<p>20210927</p>

        
      </section>

      

      


      
  

    </div>

    
      

    
  </article>

  
  
    
  
  
</div></div>

Never test

display: block -> display: none이 된 component는
렌더링되지 않는다
DOM tree에는 보인다
React devtools Component tab에는 보인다
component는 destroy 되지 않는다
    
component는 계속 유지된다
component는 하던 일을 계속 한다
useEffect의 return은 실행되지 않는다
그렇다면 dislpay: none이 초기값인 component는?
display: block -> none이 될 때와 마찬가지로
렌더링되지 않는다
DOM tree에는 보인다
React devtools Component tab에는 보인다
component는 일을 한다
    
useEffect가 실행된다
결론
React의 functional component는 React element를 return 한다.
    
React element는 CSS display property가 block이든 none이든 상관없이 return한다
이 단계에서 side effect도 모두 실행된다
브라우저는 return 된 React element를 사용하여 DOM tree와 CSSOM tree를 만든다
    
Rendering tree를 만들 때 display: none인 element는 빠진다
React는 이 단계에서 아무 역할도 하지 않는다
예제 코드
https://codesandbox.io/s/react-style-display-none-jf32k?file=/src/App.tsx
20210927

react에서 CSS display none을 쓰면 어떤 일이?

댓글