[React 입문] Styling + 반복되는 구간 컴포넌트 처리

 

 

// rfce

import React, { useState } from 'react';

import Layout from 'Layout';

const divStyle = {

    display: 'flex',

    justifyContent: 'center',

    alignItems: 'center',

    borderRadius: '10px',

    border: '1px solid green',

    width: '100px',

    height: '100px',

};

function App() {

    return (

        <div

            style={{

                display: 'flex',

                padding: '100px',

                gap: '12px',

            }}

        >

            <div style={divStyle}>감자</div>

            <div style={divStyle}>고구마</div>

            <div style={divStyle}>오이</div>

            <div style={divStyle}>가지</div>

            <div style={divStyle}>옥수수</div>

        </div>

    );

}

export default App;

 

*  Style을 객체로 넣고 자바스크립트로 표현하는 거라 {{}} 이렇게 표현함.

* html의 class를 사용할때는 JSX에서는 className을 사용

---

위와 같은 코드를 분리해서도 작성 가능 (app.js  / app.css)

*  import './App.css' 추가하고 className설정

* <div className ="divStyle"> 반복되서 이 부분을 밑에서 컴포넌트 처리 하기

App.css

 

---

 

// rfce

import React, { useState } from 'react';

import './App.css';

function App() {

    const vegetableArray = ['감자', '고구마', '오이', '가지', '옥수수'];

    return (

        <div className="app-style">

            {vegetableArray.map(function (item) {

                return <div className="divStyle">{item}</div>;

            })}

        </div>

    );

}

export default App;

 

* 중복되던 <div> 값을 자바스크립트 문법 {}인 배열의 map 메소드를 활용해서 동일하게 표현 가능

---

 

// rfce

import React, { useState } from 'react';

import './App.css';

function App() {

    const vegetableArray = ['감자', '고구마', '오이', '가지', '옥수수'];

    return (

        <div className="app-style">

            {vegetableArray

                .filter(function (item) {

                    return item !== '오이';

                })

                .map(function (item) {

                    return <div className="divStyle">{item}</div>;

                })}

        </div>

    );

}

export default App;

* 이렇게 filter + map 조합으로 원하는 값을 구현 가능