Daily Coding - FE 2주차 - 20강 추가 공부

==================== ! 강의 내용 ! ====================

20강

props

: Properties 의 약자

: 함수에 매개변수를 넣는 것처럼 컴포넌트에 전달하는 값

: 값을 지닌 존재 // <-> method '함수'

!쉽게 말하면 값을 함수에 담아서 전달하는 거라고 생각하면 됨!

 

ex)

<APP />

const num = 10; 이라는 변수를 만든다

 

<Component num = {num} />

<p> {props.num} </p>

 

 

실제 예제)

// 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>
  );
}

export default App;

 

// Toast.js 파일 내용

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

const Toast = (props) => {
    return (
        <div className={`toast toast-${props.title}`}>
        <main className='toast__message'>
        <header className='toast__message-title'>{props.title}</header>
        <p className='toast__message-text'>{props.text}</p>
        </main>
        <button className='toast__button'>Dismiss</button>
    </div>
    );
};

export default Toast;

 

// Toast.css 파일 내용

.wrapper {
    background: #f4f4f4;
    width: 100vw;
    height: 100vh;
}

.toast {
    background: white;
    border-left: 1rem solid #666666;
    border-radius: 0.5rem;
    box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    margin: 1rem auto;
    width: 25rem;
}

.toast__message-title{
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    margin-top: 0;
    text-transform: capitalize;
}

.toast__message-text{
    margin-bottom: 0;
}

.toast__button {
    color: rgb(0, 0, 0);
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: inherit;
    opacity: .5;
    padding: 0;
}

.toast-success {
    border-color: #09ff00;
}

.toast-warning {
    border-color: #ffe100;
}

.toast-error {
    border-color: #ff0000;
}

 

 

==================== ! 느낀 점 ! ====================

위 구문 또한 'map'을 활용하면 더 간결하게 코드를 작성할 수 있다고 한다.

하지만 아직 map까지 이해하고 활용하기에는 나의 뇌 용량이 부족한거 같다.

어제  props 강의를 들으면서 사실 조금 어렵다.. 앗.. 싶었는데,,,

이게 오늘 들으니 또 이해가 가네?ㅋㅋㅋㅋ

map에 대해서 조금 찾아보고 내일 다시 강의 들어야겠다 휴~~

조금 여유롭게 수강을 해보려고 한다.

퇴사도 늦어졌으니 여유를 갖고 해보자!! 아자!