CODE_PLAN

props 는 properties 의 줄임말입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다.

import React from 'react';

function HelloWorld(props) {
  return <div style={{ color: props.color }}>반갑습니다 {props.name}</div>
}

export default HelloWorld;

로 사용하면 props 내부의 값을 조회 할 때마다 props. 를 입력해야 합니다. 함수의 파라미터에서 비구조화 할당 (혹은 구조 분해라고도 불릅니다) 문법을 사용하면 아래와같이 좀 더 코드를 간결하게 작성 할 수 있습니다.

결과는 똑같이 나옵니다.

defaultProps 로 기본값 설정도 가능합니다.

참고> 

https://react.vlpt.us/basic/05-props.html

useState() 갈호안에 있는값은 초기값을 뜻하며 (5) 로되있으면 초기값이 5가 됩니다.

setNumber 로인해서 number값이 변화되는값을 나타낼수 있습니다. 

React에서 컴포넌트 파일을 import 하고 동적으로 불러오면 에러가 발생합니다. 

그럼으로 동적으로 불러오기 위해서는 React.lazy()를 사용해야 합니다.

ex)

import Spinner from './HelloWorld .jsx';

export default () => {
  render() {
    return (
      { true ? <HelloWorld /> : null }
    )
  }
}

api를 통해서 받아온것으로 활용하는데 css를 설정해도 전체적으로 먹혀서 따로 js파일(더미데이터)로 작성해서 map 으로 받아오게해서 하는게 쉬울듯합니다.

위 코드와 같이 작성하면 밑과같이 나오게 할수있다.

내용물 자체는 미완성이지만 우선 슬라이더 기능구현한 내용을 남겨놓을려고 해서 올린글입니다.