TIL 과제1

1. 컴포넌트 나누기

 

page 부터 살펴보기

 

page 를 나누고

그 안에서 components 를 나누고

그 안에서 elements 를 나눠본다.

 

2. Image 라는 ele가 2가지 이상 용도로 사용 될 경우

 

style 을 용도 갯수 만큼 만들어서 사용 할 생각이였는데

 

이 방법이 아니라 <image types={} > props 값으로 바꿔준다. (input type이 아님 임시변수)

 

예를 들면 동그라미 이미지와 세모, 네모가 필요하다 생각했을 때

나였다면 <circleImage> <트라이앵글image> <네모image> 이렇게 3개를 썼을 텐데

 

이 방법이 아니라

 

<image types={circle}>

<image types={트라이앵글}>

<image types={네모}>

 

이렇게 하면 같은 타입이 바뀌지만 이미지를 사용하는 것 처럼 보여서 덜 혼동스럽다.

 

3. 이미지 size를 나눌때

styled.components 에서 속성을 줄 때

--size : %{(props) => props.size} px ;

 

이렇게 설정해준다면, 다음 사이즈를 사용 할때 쉽게 쓸 수 있다.

이미지같은 경우는 height width 100%를 놔둬도 자기 사이즈가 없다면 나오지 않는다.. 그러므로 이렇게 사이즈를 정해주면 가로x세로 값을 동일 사이즈로 만들수있다. 

 

width : var(--size)

height : var(--size) 

 

defaultProps 에서 size 기본 값을 정해주면 된다. size = 36