ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Nested JSX
    Study/React 2020. 5. 25. 13:42

    Nested JSX

    You can nest JSX elements inside of other JSX elements, just like in HTML.

    Here’s an example of a JSX <h1> element, nested inside of a JSX <a> element:

     

    <a href="https://www.example.com"><h1>Click me!</h1></a>

    To make this more readable, you can use HTML-style line breaks and indentation:

     

    <a href="https://www.example.com">
      <h1>
        Click me!
      </h1>
    </a>

     

    If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses. This looks strange at first, but you get used to it:

     

    (
      <a href="https://www.example.com">
        <h1>
          Click me!
        </h1>
      </a>
    )

     

    Nested JSX expressions can be saved as variables, passed to functions, etc., just like non-nested JSX expressions can! Here’s an example of a nested JSX expression being saved as a variable:

     

     const theExample = (
       <a href="https://www.example.com">
         <h1>
           Click me!
         </h1>
       </a>
     );

     

     


    중첩된 JSX

     

    당신은 다른 JSX 요소들안에 JSX요소들을 중첩할 수 있다. 마치 HTML처럼.

    여기 JSX <h1> 태그에 <a>태그가 안에 중첩된 예시가 있다. 

    <a href="https://www.example.com"><h1>Click me!</h1></a>

     

    이것을 더 가독성있게 만들기 위해, 당신은 html-style line breaks와 들여쓰기를 사용할 수 있다. 

    <a href="https://www.example.com">
      <h1>
        Click me!
      </h1>
    </a>

     

    JSX 식이 둘 이상의 행을 차지하는 경우 다중 행 JSX 식을 괄호로 묶어야 한다.

     

    (
      <a href="https://www.example.com">
        <h1>
          Click me!
        </h1>
      </a>
    )

     

    Nested JSX expressions can be saved as variables, passed to functions, etc., just like non-nested JSX expressions can! 

     

    중첩된 JSX식은 변수로써 저장될수도 있고, 함수에 전달될수 있다. 중첩되지 않은 JSX식이 가능한 것처럼!

     const theExample = (
       <a href="https://www.example.com">
         <h1>
           Click me!
         </h1>
       </a>
     );

     

     

    출처: codecademy

    를 번역했습니다.

    'Study > React' 카테고리의 다른 글

    ReactDOM.render() I  (0) 2020.05.25
    JSX Outer Elements  (0) 2020.05.25
    Attributes In JSX  (0) 2020.05.25
    JSX Elements And Their Surroundings  (0) 2020.05.25
    What is JSX?  (0) 2020.05.25

    댓글

Designed by Tistory.