220405 React Study 2회차

오늘 배우는 내용!

1. 소스 컴포넌트 방식으로 선언
2. 이벤트 핸들러 작업

오늘 수업은 1회차에 const 방식으로 선언했던 내용을 function으로 바꾸고, 컴포넌트방식으로 변경하는거로 시작한다.

변경 전

변경 후

컴포넌트화 작업을 할 때 문자열의 첫번째 문자는 대문자로 해주도록 하자.
*카멜표기 방식을 준수하여 입력하자.

위에 만든 CatItem을 favorites에 담는 소스로 바꾼다.

변경 전

변경 후

CatItem / 은 컴포넌트 방식으로 작성한 예시이다. 해당 영역에 닫는태그를 넣어주는걸 잊지 말자.
거듭 강조하지만 선언 할 때 첫 문자는 대문자로 시작해주도록 하자.

이런식으로 전체적으로 소스정리를 해보았다.

• 결과물
  

이제 타이틀 영역에 있는 녀석을 const app에서 중복호출을 할 수 있게 변경 할 것이다.
우리가 평소 html을 작성하듯, 여는태그와 닫는태그 사이에 텍스트를 입력 한 뒤, const Title 영역에서 인자로 호출 할 것이다.

인자로 props라고 넣어보았다. Title이라는 컴포넌트 안에 있는 요소이기에 .children을 이용하여 호출하였다.

<Title>1번째 고양이 가라사대</Title>
<Title>2번째 고양이 가라사대</Title>

위와 같이 입력하면 같이 출력된다.

//

이제 컴포넌트 요소에 스타일을 정의하도록 한다.

리액트 컴포넌트 요소에 스타일을 입히는 방법은 3가지를 알려주었다.
이모션 방식, styled 방식, tailwind 방식

나중에 한번씩 라이브러리를 찾아보아야겠다.

컴포넌트 요소로 만든 태그에 인라인 요소로 스타일을 정의한다.

스타일을 정리하는 겸 콘솔창에 오류가 나는 문제를 해결해보자,

리액트에서는 html 처럼 class가 아닌, ClassName으로 변경해주어야한다.
지금까지 적은 class들을 다 ClassName으로 변경해주어야한다.
*마찬가지로 카멜표기법을 준수해라. 꼭. 명심해라. 약속이다.

위와 같이 입력하면 오류가 해결된다.

//

이번엔 버튼에 이벤트를 넣기 전에, 디스트럭처링이라는 새 문법을 배웠다.
아직 완벽히 이해하지 못해 더 공부해보아야겠다. 이 방법을 이용하면 좀 더 편하지 않을까?

//

하트 버튼 및 submit 버튼에 이벤트 추가하기

const MainCard 안에 위와같이 기능을 넣고, 반환한 버튼에 이벤트를 추가한다.

-이벤트 생성 시 함수 이름은 대문자로 시작하여 카멜표기법을 준수하여 작성하자.
-실무에서 호출 할 때 Handler 라는 명칭이 자주 사용된다고 한다.
-현업자들과 협업 할 때 참고하기 위해 머리속에 박아놓자.
-이벤트핸들러 또한 카멜표기법을 준수해주도록 하자. 진짜 카멜 표기법 잊으면 꿀밤이다.

콘솔창에서도 잘 호출되는거로 확인했다.

오늘 반드시 잊지 말아야 할 내용은 카멜표기법, 디스트럭처링, 이벤트 핸들러 중괄호 이 세가지 포인트가 중요내용이다. 다시 한번 복습하면서 이해 안되는건 구글링해서 찾아보도록 하자.