본문 바로가기
Web/React

02. 컴포넌트에 값 전달하기

by 사라리24 2024. 5. 13.

1. 컴포넌트에 값 전달하기

  

 

  • 방법
 
      < jSX >
        <Hello userid = "apple"/>

      < Component >
        function Hello(props){
               <div> 안녕하세요. {props.userid}님</div>
 
        }
 

 

 

  • src > App.js
 
      < src > App.js  >

 
      import React from "react";
      import Hello from "./Hello";
      import './App.css';
 
 
      function App(){

        const userid = 'apple';
        const style = {
          backgroundColor: 'deepskyblue',
          color: 'deeppink',
          fontSize: 30,
          padding: '1em'
        }

        return (
          <>
            {/*주석은 화면에 보이지 않습니다*/}
            /* 자바스크립트 문법의 주석*/
            <Hello/>
            <Hello/>
            <Hello userid="apple"/>
            <Hello userid="apple" name="김사과" color="deeppink"/>
            <div>DIV 사용</div>
            <div style={style}>아이디: {userid}</div>
            <div className="black-box"></div>
          </>
        );
      }

      export default App;
  

 

  • src > Hello.js
 
      < Hello.js >
            import React from 'react';

            function Hello(props){
                return <div style={{color: props.color}}>안녕하세요{props.userid}({props.name})</div>
            }

            export default Hello;
 
  

 

 

 

 

  •  Member.js 생성
  
      < src > Member.js  >

            import React from 'react';

            function Member({userid, name, color}){
                return <div style={{color}}>안녕하세요{userid}({name})</div>
            }
 
 
            export default Member;
 
 

 

  • App.js에 추가
  
      < App.js>
 
         import React from "react";
         import Hello from "./Hello";
         import './App.css';
         import Member from "./Member"; *추가
 
 
       function App(){

          const userid = 'apple';
          const style = {
            backgroundColor: 'deepskyblue',
            color: 'deeppink',
            fontSize: 30,
            padding: '1em'
          }

          return (
            <>
              {/*주석은 화면에 보이지 않습니다*/}
              /* 자바스크립트 문법의 주석*/
              <Hello/>
              <Hello/>
              <Hello userid="apple"/>
              <Hello userid="apple" name="김사과" color="deeppink"/>
              <div>DIV 사용</div>
              <div style={style}>아이디: {userid}</div>
              <div className="black-box"></div>
              <Member userid="banana" name="반하나" color="deepskyblue"/>  {/*추가*/}
 
              </>
            );
          }

          export default App;
 
 

 

  

  • Hello.js에 추가
  
       < Hello.js >
 
            import React from 'react';

            function Hello(props){
                return <div style={{color: props.color}}>안녕하세요{props.userid}({props.name})</div>
            }
 

                    {/*추가*/}
                Hello.defaultProps = {
                    userid: "아이디없음",
                    name: "이름없음",
                    color: "blue"
                }
 
 
            export default Hello;
 
 

 

 

  • Wrapper.js 생성
 
 
      < Wrapper.js >

 
            import React from "react";

            function Wrapper(){
                const style = {
                    border: "3px solid deeppink",
                    padding: '10px'
                }
                return (
                    <div style = {style}>
                    </div>

                )
            }

            export default Wrapper;
 
 
  

 

  • App.js에 추가
  
      < App.js 추가>

      <Wrapper>
          <Hello userid="apple" name="김사과" color="deeppink"/>
          <Hello userid="banana" name="반하나" color="deepskyblue"/
      </Wrapper>
 
 




* 안나옴

 

  • Wrapper.js 수정
 
      <Wrapper.js >

        import React from "react";

        function Wrapper({children}){ {/* children 추가*/}
            const style = {
                border: "3px solid deeppink",
                padding: '10px'
            }
            return (
                <div style = {style}>
                    { children } {/* children 추가*/}
                </div>

            )
        }

        export default Wrapper;
  
* Children  넣기



뜨게 됨

 

 

 

  • App.js 추가
  
      < App.js>
 
      
      <Wrapper>
         <Hello userid="apple" name="김사과" color="deeppink"/>
         <Hello userid="banana" name="반하나" color="deepskyblue"/
         <Member userid="banana" name="반하나" color="gold" isLover={true}/>
      </Wrapper>
 
 

 

  • Member.js 
 
      < Member.js>

 
 
            import React from 'react';

            function Member({userid, name, color, isLover}){
                return <div style={{color}}>안녕하세요{userid}({name}{isLover? <b>❤</b>:null})</div>
            }

            export default Member;
 
 
 
* isLover 추가

 

  • App.js 수정
  
      < App.js  >

      <Wrapper>
        <Hello userid="apple" name="김사과" color="deeppink"/>
        <Hello userid="banana" name="반하나" color="deepskyblue"/>
        <Member userid="orange" name="오렌지" color="gold" isLover={true}/>
        <Member userid="melon" name="이메론" color="yellowgreen" isLover={false}/>
      </Wrapper>
 
  
 

 

‼ JSX에서 null, false, undefined 를 랜더링하면 화면에 아무것도 출력하지 않음

 

  • Member.js 수정 (다른 방식)
 
 
      < Member.js  >
            import React from 'react';

            function Member({userid, name, color, isLover}){
                return <div style={{color}}>안녕하세요{userid}({name}{isLover && <b>❤</b>})</div>
                {/*{isLover? <b>❤</b>}:null */}
            }

            export default Member;

    
  

 

‼ 전체코드

  • App.js
더보기
 
 
      .black-box {
        background: black;
        width: 80px;
        height: 80px;
      }
 
 

 

  • App.css
더보기
 
 
    import React from "react";
    import Hello from "./Hello";
    import Member from "./Member";
    import Wrapper from "./Wrapper";
    import './App.css';

    function App(){
      const userid = 'apple';
      const style = {
        backgroundColor: 'deepskyblue',
        color: 'deeppink',
        fontSize: 30,
        padding: '1em'
      }

      return (
        <>
          {/* 주석은 화면에 보이지 않습니다 */}
          /* 자바스크립트 문법의 주석 */
          <Hello/>
          <Hello/>
          <Hello userid="apple"/>
          <Hello userid="apple" name="김사과" color="deeppink"/>
          <div>DIV 사용</div>
          <div style={style}>아이디: {userid}</div>
          <div className="black-box"></div>
          <Member userid="banana" name="반하나" color="deepskyblue"/>

          <Wrapper>
            <Hello userid="apple" name="김사과" color="deeppink"/>
            <Hello userid="banana" name="반하나" color="deepskyblue"/>
            <Member userid="orange" name="오렌지" color="gold" isLover={true}/>
            <Member userid="melon" name="이메론" color="yellowgreen" isLover={false}/>
          </Wrapper>
        </>
      );
    }

    export default App;
 
 

 

  • Member.js
더보기
 
 
            import React from 'react';

            function Member({userid, name, color, isLover}){
                return <div style={{color}}>안녕하세요{userid}({name}{isLover && <b>❤</b>})</div>
                {/*{isLover? <b>❤</b>}:null */}
            }

            export default Member;
 
 

 

  • Wrapper.js
더보기
 
 
            import React from "react";

            function Wrapper({children}){
                const style = {
                    border: "3px solid deeppink",
                    padding: '10px'
                }
                return (
                    <div style = {style}>
                        { children }
                    </div>
                )
            }

            export default Wrapper;
 
 

 

 

 

 

@과제) JXS 문법을 사용하여 컴포넌트 만들어보기

  

 

 

JSX 소개 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

  • 문제
    JSX를 사용하여 아래와 같이 출력되도록 작성해보자
    (단, 프로젝트의 이름은 jsx로 함)
       
       김사과님이 학습한 내용들
      * 파이썬
      * HTML
      * CSS
      * JavaScript
      * MySQL
      * MongoDB
      [이미지]

 

  • App.css
 
      < App.css  >

            .deeppink {
                color:deeppink;
            }
  

 

  • App.js
 
      < App.js  >

 
      import './App.css'

      function App() {
        const name = '김사과';
        return (
          <>
          <h2 className='deeppink'> {name}님이 학습한 내용들 </h2>
          <ul>
            <li>파이썬</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>MySQL</li>
            <li>MongoDB</li>
          </ul>
          </>
        );
      }

      export default App;
 
  

 

⬇️다른 방법

  • App.js
 
 
      < App.js  >

            import './App.css'

            function App() {
              const name = '김사과';
              const list = ['파이썬', 'HTML','CSS','JavaScript','MySQL','MongoDB'];
              return (
                <>
                <h2 className='deeppink'> {name}님이 학습한 내용들 </h2>
                <ul>
                  {
                    list.map((item) => (
                      <li>{item}</li>
                    ))
                  }
                </ul>
                <img style={{ width: '200px', height: '100px'}} src="https://cdn1.sisiplus.co.id/media/sisiplus/asset/uploads/artikel/Nu6Lih20z6rtvxGzqv47TYJwoXZuPgBw8LwK0mXR.jpg" alt="AI"/>
                </>
              );
            }

                  export default App;
 
 
  

 

 

HTML to JSX

to TypeScript Declaration to TypeScript Declaration

transform.tools

 

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

05. useEffect, 웹소켓  (0) 2024.05.17
04. 배열 데이터 활용, useRef  (0) 2024.05.16
03. Counter, Input, useState  (0) 2024.05.16
01. React, 컴포넌트 생성  (0) 2024.05.13

관련글

티스토리툴바