[React]Chapter3_컴포넌트

 

리액트에서 정의하는 컴포넌트는 크게 두가지이다. 함수형,클래스형 컴포넌트.

컴포넌트는 무조건 대문자로 시작한다.

 

지난번 Chapter1에서 Image1에 HomeImage를 두개씩 담아줬는데

 

이 HomeImage를 컴포넌트로 만들어볼 것이다!

 

이렇게 함수형의 컴포넌트로 만들고

 

다시 Image1에서 태그 형식으로 쓸 수 있다.

 

 

 

직접 구현해봅시다~!

그러면 이미지 3개를 띄어볼건데, 가장 상단의 사진은 MainImage컴포넌트를 사용할거고, 나머지 2개의 사진은 Images컴포넌트를 통해 띄어볼거다. 그리고 이 모든 걸 띄어주는거는 finalImage 변수에서 모아준 다음

--> 이렇게 render해 볼것이다.

 

 

나는 이미지들의 크기를 가로 200 세로 200으로 지정해줬고 이미지가 깨질때를 대비하여 alt속성도 넣어줬다. 이렇게 이미지의 틀을 지정하는 컴포넌트를 하나 만들어줬다. 이름은 ImageFrame!

 

props는 매개변수이다! 여기에 이미지의 경로를 받아줄거다.

props.img를 하는 이유는 만약 props에 이미지 경로가 두개 이상이 올때 구별을 해줘야하기 때문이다. this같은 느낌인듯하다.

 

이제는 이미지 두개를 띄우는 컴포넌트 Images를 받아줄거다. 이거때문에 앞에 props.img해준거다. 그리고 중괄호 씌어준 이유는 JSX문법이기 때문

 

 

여길 잘보면 <ImageFrame img="이미지경로"/>를 함으로써 앞에서 만들어준 틀을 활용한 것을 볼 수있다!

 

 

 

마지막으로는 가장 상단에 올라갈 MainImage를 만들어줬다.

 

이건 화살표 함수인데

 

화살표함수

 

화살표함수의 ()에는 기존에 넣었던 props를 =>다음 { }안에는 return 내용을 넣어주면 된다.

화살표 함수의 장점은 function대신 =>로 선언하고 return도 생략가능하므로 간략하게 선언할 수 있다.

 

https://mr-soso.tistory.com/113

react #4 화살표 함수 (feat. bind)

 

finalImage 변수는

사진이 만족스럽게 잘 뜨는 것을 확인할 수 있다. 

 

맨 위에 Meanings Land라는 대문을 그냥 <header>태그 안에 <h1>태그를 통해 구현했는데 얘도 컴포넌트를 이용해 구현해보겠다.

 

얘는 props.children을 통해서 props에서 받아온 텍스트를 띄운다.

 

그래서 props를 출력해봤는데

 

 

children으로 받아오는 것을 알 수 있다. 그래서 props.childern을 하는거다 ! (뒤에  children 설명링크를 걸어놨다)

 

이렇게 props.children을 하면 <HeadText>라는 태그를 만든 것 처럼 사용할 수 있다. 장점은 이 컴포넌트를 여러번 재사용 할 수 있고 굳이 이 안에 <h1>같은 태그 넣지 않고 그냥 문자열만 있어도 그 기능을 한다! 

 

children은 무엇일까?

 

https://developer-talk.tistory.com/226

[React]props.children 사용

이 글을 통해 이해해 본 바에 따르면 

예를 들어 내가 HeadText안에 <h1>태그를 어마어마하게 많이 입력할 수도 있다. 만약 props.children을 하지 않으면 아까 앞에서 본것 처럼 finalImage 컴포넌트에서 그냥 텍스트만 쳐도 <h1>태그에 텍스트가 담기지도 않을 것이고, 하나하나 HeadText 컴포넌트에서 

<h1>"MeaingsLand"</h1>

<h1>"안녕하세요"</h1>

.

.

.

등등 일일이 다 써줘야한다는 불편함이 있다.

이렇게 여러 앨리먼트를 처리해야할 때 props.children을 하면 편하게 받아올 수 있다. 그래서 앞에서 사진 할때도 props.img를 한것도 비슷한 원리인 것 같다. 

 

https://reactjs-kr.firebaseapp.com/docs/composition-vs-inheritance.html

Composition vs Inheritance – React

 

 

ES6+ 디스트럭쳐링 문법 적용후에는

매개변수로 props가 아니라 {img}를 받아오면 props.img대신 img만 써도 된다!