220407 REACT STUDY 4일차

오늘은 REACT STUDY 4일차이다.

점점 심연속으로 끌려져가는 느낌이 가득하다. 손은 따라 치고 있는데 뇌에서는 정리가 되어야 하지만 결국엔 쓴 소스를 다시 돌려보고 또 돌려본다. 포기하지말고 계속 이어나가보자.

1. 좋아요 한 고양이 이미지 .map() 방식으로 변경하기

기존에 CatItem 컴포넌트 선언으로 끌어온 이미지 태그이다. 이걸 어제 배운 useState 를 통해 재정의 하고자 한다.

const CAT1 = "https://cataas.com/cat/60b73094e04e18001194a309/says/react";
const CAT2 = "https://cataas.com//cat/5e9970351b7a400011744233/says/inflearn";
const CAT3 = "https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript";

const cats = [CAT1, CAT2];

일단 utils.js 안에 있는 변수를 가져와 cats라는 변수 안에 배열로 선언한다.

return (
   <ul className="favorites">
     {cats.map((cat) => (
        <CatItem img={cat} />
     ))}
   </ul>
)

리턴값에 변수 cats를 .map 방식으로 하여 cat이라는 임의의 인자를 넣고, 기존엔 그냥 url을 다 적었지만 우리는 {cats}라고 적어 value값을 받아올 것이다.

https://mjn5027.tistory.com/80
위 블로그에서 .map() 에 대해 굵고 짧게 잘 정리해놓았다. 그 외에 다른 글들도 잘 정리해놓았으니 더 읽어보도록 하자.

고양이가 정상 출력되는것을 확인 할 수 있다.

하지만 한가지 거슬리는 녀석이 뜬다.

https://crong-dev.tistory.com/47

해당 문서를 참조하자.

!주의 : props로 받아온 인자값들은 항상 맞춰주도록 하자, 임의로 변경하면 오류난다.

2. 좋아요 버튼 누를 시 favorites에 이미지 추가하기

MainCard에 선언되어있는 HandleHeartClick 이벤트를 상태끌어올리기를 하기 위하여 App에 이동시키고, onMouseOver이벤트는 지우도록하자. 안쓴다.

const [favorites, setFavorites] = React.useState([CAT1, CAT2]); // 스테이트 추가

function HandleHeartClick() {
    // console.log('하트 눌렀음');
   // 스프레드 오퍼레이터
   setFavorites([...favorites, CAT3]);
}

이전시간에 App 안에 utils.js 에서 CAT1부터 CAT3까지의 변수를 가져와서 사용했다.
새로운 디스트럭처링 구분에 favorites, setFavorites를 넣고 useState 내에 cat1과 cat2를 넣었다. 변수를 배열로 넣는 방식은 다시봐도 신기하다.

https://paperblock.tistory.com/62
스프레드 오퍼레이터 관련 문서는 여기를 참고하자.

블로그 게시글에서 보여주듯 ...을 통해 앞서 배열을 호출하고, 그 뒤에 이벤트 발생 시 CAT3을 추가한다는 의미이다.

이제 만든 기능을 MainCard 컴포넌트 태그에 기능으로 넣어주자!

<MainCard img={mainCat} HandleHeartClick={HandleHeartClick} />

같이 공부하시는분이 알려줘서 알았는데 HandleHeartClick={HandleHeartClick} 에서 앞에는 바뀌어도 상관없다고 한다. 그냥 일관성있어보이게 하기 위함이다.

그럼 이제 const MainCard props 영역에 HandleHeartClick을 추가해주고 기능이 잘 되는지 확인해보자.

이상하다, 기능이 작동하지 않는다. 왜냐면 const favorites에도 props를 해주어야하기 때문이다.

우리가 위에서 스테이트를 추가했기에 favorites 컴포넌트에 재선언을 해주어야한다.

<Favorites favorites={favorites} />
// 이걸 const favorites로 prop해주기,

function Favorites({favorites})

이렇게 되는 것이다.
우리가 초반에 테스트해본다고 cats로 배열을 담은걸 지우고 favorites로 바꿔주자.

{cats.map((cat) => (
     <CatItem img={cat} key={cat} />
))}
// 변경 후
{favorites.map((cat) => (
     <CatItem img={cat} key={cat} />
))}

이렇게 props를 해오면

하트를 누를 시 고양이 이미지가 잘 나온다!

3. 인풋에 입력 시 해당 하는 값 받아오기
영어 대사를 입력하는 란에 입력을 하는 값을 받아내는것을 해볼 것이다.

위와같이 추가하였다. 인풋에 변화가 발생 할 시 HandleInputChange라는 함수를 받아와 처리한다.
e, 즉 이벤트 대상을 콘솔을 찍어보면

이런식으로 호출된다. 이 대상을 펼쳤을 때 나오는 인자 중 target이 중요하다.

아직은 ...으로 나오는데 여기 입력되는 내용이 나중에는 이미지 하단에 출력될것같다.

위와 같이 소스를 수정하였다.
setValue 함수를 통해 입력되는 값을 .toUpperCase() 즉 대문자로 변환을 해주었다.
실제 필드에서도 대문자로만 입력되는것을 확인 할 수 있다.
input value={value}라고 지정하여 입력되는값이 타겟이 되어 바로바로 변환된다.

오늘은 어제 배운 useState를 복습한 내용인 것 같다.
오늘 중점적으로 다시 봐야 할 내용을 집어보자면

• setState내에 배열로 초기값 선언도 가능하다.
• spread operator로 작성하게 되면 초기값으로 선언한거에 랜덤으로 추가하는게 가능하지 않을까? 테스트를 좀 해보면 좋을 것 같다.
• props에 대한 이해는 그래도 되어가고 있다! 뭔가 배운걸 다시쓰면서 찾아보니까 기분이 오묘하게 좋은듯하다!!
• 전에도 스터디 할 때 제대로 설명 못한 spread operator는 관련 문서들을 좀 더 많이 봐야겠다.

리액트에 기본적인 자바스크립트 언어까지 포함되니까 뇌가 바쁘게 일하는것같다. 어렵다. 미친듯이 어렵다. 하지만 포기하지 않고 공부하다보면 프론트앤드 개발자에 한걸음씩 더 가까워지지 않을까?