🔥React🔥 어렵네..?컴포넌트? 함수?| React 시리즈 003

today i studied about React component.

its so hard.. to me

idk well,, i wanna know correctly. i m afraid if i pass this part, after will be poison 

 

---

정리

 

0. 바탕화면에 새폴더 만들기.

1. visual studio code 실행

2. 파일 - 폴더 열기 - 만들어둔 새폴더 클릭

3. ctrl + ` (틸다)

4. npm init react-app. 입력

5. npm run start 입력 (이때 창이 하나 뜸. 일단 무시)

6. 좌측 카테고리에 public 에 index.html 빼고 다 삭제. + src 에 index.js 빼고 다 삭제 

 

 

7.  남겨진 html 에 필요한 코드만 남기고 다 지워주기

8. js 에도 똑같이 필요 코드만 남겨두고 지워주기

---

연습 

 

js 파일

 

이때 아래 조건 3가지를 충족시켜야만  리액트 컴포넌트라고 부를 수 있다.

---

컴포넌트 파일에 컴포넌트를 정의해주기..

대문자로 시작하는 함수를 하나 선언하고, default export 해줌.

 

그리고 import 로 이미지 파일을 불러와서 img 태그의 src 속성에다가 넣습니다.

그리고 이미지가 보이지 않는 상황에서 보여줄 텍스트 속성으로 alt 속성에 'rock'을 넣어주었습니다.

 

---

 

컴포넌트가 헷갈릴때 참고하자

컴포넌트를 만들 때 함수를 사용하는 것이지 두 개가 같은 것은 아니다.
-컴포넌트는 인스타그램을 예로 들어서 설명-
인스타그램에는 하트를 누르면 좋아요가 되고, 친구를 팔로우하거나 게시물에 댓글을 다는 등등 할 수 있는 기능들이 아주 많다.
이렇게 많은 기능들을 하나의 파일에 작성하게 되면 보기에 아주 불편할것이다.
그래서 하나의 기능을 하나의 파일에 작성하고 나중에 App.js폴더에 다 import 해오는거죠.
이때 하나의 기능을 담은 파일을 컴포넌트라고 이해하면 쉽습니다.
즉 재사용이 가능하고(댓글을 달 수 있는 컴포넌트는 인스타그램뿐만 아니라 아주 다양한 곳에 쓰이니까요~), 기능이 세부적으로 분리되어 있는 작은 단위라고 볼 수 있다!