#중앙정보처리학원-64일차-

11/01

오늘은 서로 다른 component간에 property를 주고 받는 것과 , 받은 property를 구조분해 할당 하여 사용하는것 그리고 
분해 할당한 것에 기본값 부여, 외부파일에 작성한 component를 export에서 사용할 component에서 import하여 사용 하는 방법, 중복된 named export 의 해결 방법, 보통의 css 파일 사용 하는법, css파일 사용시 동일한 className을 사용하였을때에(module)로 문제 해결, 그리고 module을 이용하여 여러 클래스 명을 할당 하는 방법을 배웠다. 

 

# property의 데이터 전달

component을 불러오는 태그에 각각의 property name과 value를 입력하면 호출되어지는 component 에서 props로 데이터를 받아 필요한 곳에 값을 할당 하여 사용 가능하다.

객체 타입으로 전달할때에는 {}중괄호를 2번 감싸서 보내주어야 한다.

 

# property의 데이터를 구조분해할당하여 수령

지난번 구조 분해 할당때처럼 component끼리 property를 구조분해 할당하여 받을 수 있다. 단 전달해주는 것의 name 과 동일 하게 받아주고 사용할때 받은 name 그대로 사용하면 된다.

 

# property의 데이터를 구조분해할당에 기본값 부여 (전달해주는것에 데이터가 없을 경우)

전달해 주는 component에서 propety의 값들이 전부 들어있으면 좋겠지만 없는 경우가 있을 수도 있기 때문에 없을경우 빈 데이터가 들어가 있는것이 싫다면 기본값을 주어 해결하면 된다.

그러면 없는 값은 기본값이 적용된 상태로 출력되게 된다. 

 

# 외부에 component import 하기  

이렇게 main component가 있는 상태에서 src/component위치에 있는 4개의 component를 호출 하려면 

component위치에 4개파일을 생성하여 만들어주고

각각의 파일을 export 설정 해준후 

main component위치에 import하여 사용 해주면 된다. 

 

# 한 파일에 작성한 여러개의 component,변수,객체를 export 하고 import 받아오기  

한번에 export 해 줄 때에는 각각 export 를 붙여주지 않고 따로 export 를 써주고 빼내고자 하는 것들의 name들을 객체화 시켜주어 export 시키고, 

import 받아 사용 해줄 수 있다.