[React] 10 리액트 style,모듈형연습

오늘도 배운 내용이 참 많지만 일단 비교적 간단했던 style을  적용하는 방법과

각 부분부분 모듈로 나누는 게 어떤 건지 쉽게 정리해보자.

 

React style 적용

1) inline styling

html태그 안에 직접 입력하는 방법
style  =  {  }   json형식(객체)으로속성명 : 속성값으로 입력
속성명 css(-) 대신 camel케이스 방식을 사용  font-size  => fontSize 

 

inline style

<div>
	<h2 style = {{color:"red",fontSize:"24px"}}></h2>
</div>

 

2) JavaScript object

 

객체형식으로 컴포넌트 내에 변수를 선언 스타일을 사용하는 태그에 style = { 변수명 }

object style

function App() {
  const style={
    fontSize :"24px",
    textDecoration:'underline',
    color:'blue'
  }
  return (
    <div className="App">
      <h2 style={{color:"turquoise",backgroundColor:"black"}}>화요일</h2>
      <p style={style}>안녕하세요 오늘은 리액트 스타일을 배워보겟습니다.</p>
    </div>
  );
}

inline,object 방식으로 스타일적용

3) css파일작성

Style.css

*{margin: 0; padding: 0; box-sizing: border-box;}
li{list-style: none;}
body{
    font-family: '나눔고딕','맑은고딕',sans-serif
}

이렇게 일반 css를 작성한 다음에 

import './style.css'

function App() {
  const style={
    fontSize :"24px",
    textDecoration:'underline',
    color:'blue'
  }
  return (
    <div className="App">
      <h2 style={{color:"turquoise",backgroundColor:"black"}}>화요일</h2>
      <p style={style}>안녕하세요 오늘은 리액트 스타일을 배워보겟습니다.</p>
    </div>
  );
}

css를 적용시켜줄 컴포넌트에서 import 해주면 사용할 수 있다.

 

React배열값 출력

변수로 배열을 넣으면 출력해 줌 (출력은 되지만 콘솔에 에러가 뜬다)

 

App.js

function App() {
  const pArr = [
    <p>안녕하세요1</p>,
    <p>안녕하세요2</p>,
    <p>안녕하세요3</p>
  ]

  return (
    <div className="App">
      {pArr}
    </div>
  );
}

배열 출력 결과

배열을 출력한후 콘솔

콘솔에서 key를 가지고 있어야 한다고 알려준다

  const pArr = [
    <p key={1}>안녕하세요1</p>,
    <p key={2}>안녕하세요2</p>,
    <p key={3}>안녕하세요3</p>
  ]

배열에 키를 넣어주고 변수를 사용하면 콘솔에 에러가 뜨지 않는다.

 

컴포넌트예제

컴포넌트는 페이지를 각 부분 부분으로 조각내어서 필요할 때마다 재사용할 수 있고

유지 보수를 간편하게 해 준다.

지금 이 코드는 하나의 부분으로 이루어져 있지만 헤더와 메인 푸터 부분으로 쪼개어서 사용할 수 있고

쪼갠 부분은 다른 페이지에서도 똑같이 사용할 수 있다.

 

App.js 해체 전

function App() {
  return (
    <div className="App">
      <header>
        <h1>Green</h1>
        <ul>
          <li>menu1</li>
          <li>menu2</li>
          <li>menu3</li>
          <li>menu4</li>
        </ul>
      </header>
      <main>
        <h2>main title</h2>
        <p>main desc</p>
      </main>
      <footer>
        <h1>green</h1>
        <address>울산시 남구 삼산동 삼산중로 100번길 그린컴퓨터아카데미</address>
      </footer>
    </div>
  );
}

해체전 화면

학원에서 만든 예제라 학원주소가 들어가긴 하는데뭐 상관없겠지..? 일단 블러

 

App.js 해체 후

function Header(){
  return(
    <header>
      <h1>Green</h1>
      <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
      </ul>
    </header>
  )
}
function Main(){
  return(
    <main>
      <h2>main title</h2>
      <p>main desc</p>
    </main>
  )
}
function Footer(){
  return(
    <footer>
      <h1>green</h1>
      <address>울산시 남구 삼산동 삼산중로 100번길 그린컴퓨터아카데미</address>
    </footer>
  )
}


function App() {
  return (
    <div className="App">
      <Header />
      <Main/>
      <Footer />
    </div>
  );
}

이렇게 각 부분을 컴포넌트로 만들고 불러서 사용하면 필요할 때 다시 사용할 수도 있고 코드도 간결해진다.

(컴포넌트 왔다 갔다 하는 건 불편하지만..)

여기서도 필요하다면 더 나눌 수 있는데 헤더에 있는 ul을 nav라는 컴포넌트로 묶어서 따로 빼주고 헤더에서 nav컴포넌트를 사용하면 똑같이 나온다.

 

App.js 쪼개고 쪼개고..(원자단위까지..)

function Header(props){
  const {list} = props
  return(
    <header>
      <h1>Green</h1>
      <Nav lists={list}/>
    </header>
  )
}
function Main(){
  return(
    <main>
      <h2>main title</h2>
      <p>main desc</p>
    </main>
  )
}
function Footer(){
  return(
    <footer>
      <h1>green</h1>
      <address>울산시 남구 삼산동 삼산중로 100번길 그린컴퓨터아카데미</address>
    </footer>
  )
}
function Nav(props){
  const {lists} = props
  return(
    <ul>
      {lists.map(li=><li key={li.id}>{li.title}</li>)}
    </ul>
  )
}


function App() {
  const lists = [
    {id:1,title:'menu1'},
    {id:2,title:'menu1'},
    {id:3,title:'menu1'},
    {id:4,title:'menu1'},
  ] //App의 배열을 Nav컴포넌트에 전달하는방법
  return (
    <div className="App">
      <Header list={lists}/>
      <Main/>
      <Footer />
    </div>
  );
}

li부분은 배열로 만들고 map 메서드를 써서 html형태로 리턴 시켜줬다.

배열로 만들어서 Header로 전달 Header에서 받아서 Nav로 전달 Nav에서 배열을. map메서드로

형태를 변경해서 출력

컴포넌트로 모두나눠도 같은화면이 나온다.

컴포넌트 파일나누기

이제 App.js안에 나눠놨던 컴포넌트들을 각각의 파일로 나눠준다. (다른 파일에서도 각각 불러 쓰기 편하게)

 

Header.js

import React from 'react'
import Nav from './Nav'

function Header(props){
    const {list} = props
    return(
      <header>
        <h1>Green</h1>
        <Nav lists={list}/>
      </header>
    )
}

export default Header

Nav.js

import React from 'react'

function Nav(props){
    const {lists} = props
    return(
      <ul>
        {lists.map(li=><li key={li.id}>{li.title}</li>)}
      </ul>
    )
  }

export default Nav

Main.js

import React from "react";

function Main(){
    return(
      <main>
        <h2>main title</h2>
        <p>main desc</p>
      </main>
    )
  }
  
export default Main

Footer.js

import React from 'react'

function Footer(){
    return(
      <footer>
        <h1>green</h1>
        <address>울산시 남구 삼산동 삼산중로 100번길 그린컴퓨터아카데미</address>
      </footer>
    )
}

export default Footer

App.js

import Header from './componetnts/Header';
import Main from './componetnts/Main';
import Footer from './componetnts/Footer';


function App() {
  const lists = [
    {id:1,title:'menu1'},
    {id:2,title:'menu1'},
    {id:3,title:'menu1'},
    {id:4,title:'menu1'},
  ] //App의 배열을 Nav컴포넌트에 전달하는방법
  return (
    <div className="App">
      <Header list={lists}/>
      <Main/>
      <Footer />
    </div>
  );
}

 

컴포넌트를 나눈다는 개념이 어떤 건지 어렴풋이 알 것 같은 느낌이었는데 이렇게 직접 하나의 파일을

각 부분별 기능별로 쪼개서 컴포넌트를 만들고 사용하면 관리하기도 편하고 코드도 보기에

좀 더 간결해 보이는 효과가 있는 것 같다. 헤더를 여러 개 넣고 싶으면 헤더 컴포넌트만 여러 번 써주면 되고

헤더컴포넌트 내용만 바꿔도 헤더컴포넌트를 사용하는 모든 페이지에서 똑같이 변경된다는 점이

관리하는 관점에서는 큰 장점으로 보인다. 지금은 그냥 만들고 끝이지만 실제 현업에서는 만든 파일들을

주기적으로 유지. 보수해줘야 하니까 각각의 파일에 들어가서 변경해 주는걸

한 개의 컴포넌트에서 처리할 수 있게 해 주는 게 압도적으로 일을 줄여주겠지??