3주차 과제

과제 : HTML에서 만든 자기소개카드를 리액트에서 재현하기

---

1. HTML의 코드를 복붙해서 App.js의 return안에 넣어준다

return안에는 가장 큰 태그가 하나여야 됨

 return (
    <>
    	.
        .
        .
    </>
 )

태그는 이름 지정할 필요없고 <>의 하위태그로 만들어서 복붙

---

2. class 변경

JSX에서는 class가 이미 다른 명령어로 사용중이기 때문에
HTML에서 class로 만들었던걸 className으로 전부 바꿔준다

ex)

<article class="profile">

→

<article className="profile">

---

3. component

<section class="intro">
        <h2>김남윤</h2>
        <p class="part">Frontend</p>
        <p>멋쟁이사자처럼</p>
      </section>

이렇게 section이랑 div같은걸 남발하면 나중에 길어지면
가독성도 떨어지고 어떤 div인지도 헷갈림

→ component 쓰면 해결

과제에선 styled.component로 만들라고 했으므로
styled.component 사용하기

3-1 styled.component 사용법

import styled from "styled-components";

맨 위에 저 식을 복붙해주고

const 컴포넌트이름 = styled.태그명`
	css코드
`

이렇게 사용하면 된다

참고)
컴포넌트로 사용하면 좋은것들

1. 반복적인 HTML을 축약할때
2. 큰 페이지들
3. 자주 변경되는 것들

단 컴포넌트는 state를 가져다 쓸 때 오류 발생

위에처럼 컴포넌트를 만들었으면 return 안에 그대로 사용하면 됨

css도 따로 만들어서 부를필요 없어짐

다른것들도 다 컴포넌트 사용해주면 된다

---

4. css바로 입히는 법

태그에 바로 css를 적용하려면

<div style={{ ... }}>

*중괄호 두개

이런식으로 바로 css를 적용가능

---

5. 좋아요 버튼 만들기

useState를 사용해서 버튼을 만들면 작동

5-1. useState사용법

useState를 치면 위에 자동으로

import { useState } from "react";

이 식이 생성됨
(안뜨면 직접 치기)

let[a, b] = useState(처음 시작값);

a는 state에 보관했던 값이 나옴
b는 state 변경을 도와주는 함수

5-2. onclick사용법

좋아요 버튼을 누르면 값이 바뀌어야함

>> onclick사용

<div onclick={ () => {
	...
    }}

좋아요 버튼을 만들려면 우선, 좋아요 숫자를 저장할 공간을 만들어야 함

초기값을 0으로 만들고 좋아요에 현재 숫자가 뜨게 함

그 다음, 버튼 만들기

<button>👍 {좋아요} </button>

클릭할 때, 좋아요 수가 증가해야 하므로 onclick적용

주의)
좋아요 = 좋아요 + 1 로 만들면
화면에 반영이 안됨

---

결과물

---

궁금했던 점

내가 배운 컴포넌트는

function Modal() {
  return (
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

이런식으로 함수로 직접 만들어 jsx로 변환하는 것만 컴포넌트인줄
알았는데 styled-component도 컴포넌트인지 의문이 들었다

→

찾아본 결과, styled-component 역시 컴포넌트를 만들어주는 방식이란걸
알게되었다.

일반 컴포넌트는 주로 구조와 기능을 담당하고,
(버튼만들기, 클릭 이벤트 처리 등등)

스타일드 컴포넌트는 스타일적용을 간단하게 만들어주는게
차이점일뿐 둘다 "component"

---

추가로,

style={{ }}

은 왜 2개의 중괄호를 사용하는지에 대해서도 찾아보니

바깥 중괄호는
jsx에서는 그냥 값을 쓸 수 없기 때문에

이처럼 중괄호를 붙여야해서 바깥쪽에 중괄호를 사용

안쪽 중괄호는

이런식으로 객체를 받기 때문에 중괄호를 사용

어려웠던 점

리액트 사용이 익숙치 않다보니
특히 터미널을 사용하는게 어려웠다

문법을 익히기전에 터미널을 다루는?법을 손에 익히는게
우선인 것 같다

---

프론트엔드 화이팅!