To_Coding_01

1. class형 컴포넌트 코드 부분과 함수형 컴포넌트 코드 부분의 차이점. (render() {return()})
2. scss가 아니라 styled-component 쓴다는 부분.
3. 1-1 주차 과제 - 스타일 먹이는 부분.
4. 함수형 처음 선언시 필요한 const Post = (props) => { }.
5. 폴더내의 index에서 컴포넌트들 묶어주는 법.
6. props값으로 함수 넘겨줄때 방법.

<Input
label="아이디"
placeholder="아이디를 입력해주세요."
_onChange={() => {
  console.log("아이디 입력했어!");
}}
/>

7. 스타일먹이는 컴포넌트에서 스타일에다가

const ElCircleButton = styled.button`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  border-radius: 50%;
`;

와 같은 형태로 값을 넣어주었는데,

return (
      <React.Fragment>
            <ElCircleButton width={ width } height={height} onClick={_onClick}>{children}</ElCircleButton>
      </React.Fragment>
    );

라는 식으로 왜 width값과 height값을 넣어주어야하는지..?

-> 스타일 컴포넌트는 해당 컴포넌트 내에서 사용하는 props 데이터를 그대로 가져다가 쓸 수가 없는 독립적인 컴포넌트라고 보아야한다. 때문에, 해당 스타일 컴포넌트에도 똑같이 데이터를 선언한 곳에서 넘겨주어야 styled.button 으로 스타일 지정해주는 곳에서 데이터를 받아서 사용할 수 있다.