Daily Coding - FE 2주차 - 21강

21강

객체 리터럴

 

**객체 리터럴 (Object Literal)**은 자바스크립트에서 객체를 생성하는 가장 간단한 방법 중 하나입니다. 중괄호 {}를 사용해 직접 속성(key)과 값(value)을 쌍으로 나열하는 방식입니다.

 

예시)

const obj = {

key1: value1,

key2: value2,

key3: value3 };

 

const person = {

name: 'Alice',

age: 25,

greet: function() { console.log('Hello!'); } };

 

객체 리터럴의 장점
1. 간결함: 객체를 빠르게 생성할 수 있음.
2. 읽기 쉬움: 코드가 직관적이고 가독성이 좋음.
3. 바로 사용 가능: 별도의 생성자 함수 없이 객체를 즉시 정의하고 사용할 수 있음.

// App.js 파일 내용

import logo from './logo.svg';
import './App.css';
import Toast from './components/Toast';

function App() {
  const messageArray = [ 
    {
      title : 'success',
      text : 'Right On!'
    },
    {
      title : 'success',
      text : 'Right On!'
    },
    {
      title : 'warning',
      text : 'No Way!'
    },
    {
      title : 'warning',
      text : 'No Way!'
    },
    {
      title : 'error',
      text : 'Go Back Home!'
    },
    {
      title : 'error',
      text : 'Go Back Home!'
    }
  ]

  // return (
  //   <div className="wrapper">
  //     <Toast title={messageArray[0].title} text={messageArray[0].text}/>
  //     <Toast title={messageArray[1].title} text={messageArray[1].text}/>
  //     <Toast title={messageArray[2].title} text={messageArray[2].text}/>
  //     <Toast title={messageArray[3].title} text={messageArray[3].text}/>
  //     <Toast title={messageArray[4].title} text={messageArray[4].text}/>
  //     <Toast title={messageArray[5].title} text={messageArray[5].text}/>
  //   </div>
  // );

  // map을 활용하여 위의 코드를 더 간결하게 만듬
    // return (
    //   <div className='wrapper'>
    //       {messageArray.map((message) => (
    //         <Toast title={message.title} text={message.text}></Toast>
    //       ))}
    //   </div>
    // );

  // 객체로 만들어서 코드를 더 간결하게 만듬
    return (
      <div className='wrapper'>
          {messageArray.map((message) => (
            <Toast message={message}/>
          ))}
      </div>
    );
}

export default App;

 

// Toast.js 파일

import React from 'react';
import './Toast.css'


// 객체 리터럴 활용
const Toast = ({message}) => {
    return(
    <div className={`toast toast-${message.title}`}>
        <main className='toast__message'>
            <header className='toast__message-title'>{message.title}</header>
            <p className='toast__message-text'>{message.text}</p>
        </main>
        <button className='toast__button'>Dismiss</button>
    </div>
    );
};

export default Toast;

 

 

Component 나누기

// ToastMessage.js 파일

import React from 'react';

const ToastMessage = ({message}) => {
    return (
        <main className='toast__message'>
            <header className='toast__message-title'>{message.title}</header>
            <p className='toast__message-text'>{message.text}</p>
        </main>
    );
};

export default ToastMessage;

 

// ToastButton.js 파일

import React from 'react';

const ToastButton = () => {
    return (
        <button className='toast__button'>Dismiss</button>
    );
};

export default ToastButton;

 

// Toast.js

import React from 'react';
import './Toast.css'
import ToastMessage from './ToastMessage';
import ToastButton from './ToastButton';


const Toast = ({message}) => {
    return (
        <div className={`toast toast-${message.title}`}>
            <ToastMessage message={message}></ToastMessage>
            <ToastButton />
    </div>
    );
};

export default Toast;

 

 

Component 합성

//Toast.js

import React from 'react';
import './Toast.css'

const Toast = ({message, children}) => {
    return (
        <div className={`toast toast-${message.title}`}>
            {children}
    </div>
    );
};

export default Toast;

// App.js

import './App.css';
import Toast from './components/Toast';
import ToastButton from './components/ToastButton';
import ToastMessage from './components/ToastMessage';

function App() {
  const messageArray = [ 
    {
      title : 'success',
      text : 'Right On!'
    },
    {
      title : 'warning',
      text : 'No Way!'
    },
    {
      title : 'error',
      text : 'Go Back Home!'
    }
  ]

    return (
      <div className='wrapper'>
          <Toast message={messageArray[0]}>
            <ToastMessage message = {messageArray[0]} />
            <ToastButton />
          </Toast>
          <Toast message={messageArray[1]}>
            <ToastMessage message = {messageArray[1]} />
            <ToastButton />
          </Toast>
          <Toast message={messageArray[2]}>
            <ToastMessage message = {messageArray[2]} />
            <ToastButton />
          </Toast>
      </div>
    );
}

export default App;