브라우저 렌더링의 원리 주소창에 https://www.google.com/을 입력하면 브라우저에서는 무슨 일이 일어날까? 브라우저가 웹 페이지를 불러올 때는 렌더링 엔진이라는 소프트웨어 모듈이 사용된다. 렌더링 엔진은 HTML, CSS, Javascript와 같은 웹 페이지 요소들을 파싱하고 이를 브라우저 화면에 표시하는 역할을 한다.   브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. 1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다(Parsing)2. 두 Tree를 결합하여 Rendering Tree를 만든다(Style) 3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다(Layout) 4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로..

조건부 렌더링(rendering)이란? 특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것 먼저 App.js의 Hello 태그 안에 isSpecial을 작성한다. import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 import Wrapper from './Wrapper'; function App() { return ( {/* true 또한 Javascript 값이기 때문에 중괄호로 감싸야 한다 */} ); } export default App; Hello.js 컴포넌트로 이동하여 아래 소스를 작성한다. 해당 소스는 삼항연산자를 활용하여 isSpecial 값의 true/false 에 따라..

조건별로 랜더링 하는 예시 소스 import React from 'react'; // 첫 번째 문자는 대문자 // 컴포넌트는 항상 함수를 반환해야 한다. const Loading = () => Loading... // 조건별로 랜더링 // 단일상태로 로딩 상태일 경우만 출력되는 컴포넌트 class LoadingConponent extends React.Component { constructor(props) { super(props) this.state = { // 로딩이 되기 전 loading : false } } render() { const { loading } = this.state return ( { /* 조건별 페이지 랜더링 */ loading && // Loading일 경우에만 출력 } ) }..