코드 스테이츠 13일차 (React 실습 - 2[props,state])

Lumi·2021년 9월 15일
0
post-thumbnail

기본 정리

이떄까지 한 스프린트중 가장 오래 걸린 스프린트이다..

props와 state에 대한 활용이 아직 익숙하지 않아서 인지 정말 많이 소요 되었다.

간략하게만 설명하고 나 스스로 공부하는 시간을 가지려고 한다.

일단 이벤트 핸들러에 대한 부분은 어느정도 알고 있다고 가정을 할것이며

이떄 onclick이벤트에 대해서만 설명을 하겠다.

처음에는 onclick이벤트의 예제가 대부분 state를 true/false로만 다루기 떄문에 나도 처음에는 그렇게 활용을 하였지만 그렇게 활용해서는 안되었다.

내가 활용한 방법법은 state의 기본값을 import해온 변수로 두는 것이다.

그뒤 클릭했을떄 핸들러 함수에서는 새로운 변수를 만든뒤 그 변수는 set state에 담아서 state의 값을 바꾸어 주었다.

이떄 중요한 점은 기존에 있던 변수의 값들도 화면에 있고 그 화면에서 내가 핸들러를 통해서 새로만든 변수를 추가해 주는 작업이기 떄문에

스프레드를 사용해서 기존 변수를 set에 추가르 해주어야 한다는 점이다.

  • 사진은 추가 하지 않으려고 했다.

    혹시라도 쉽게 해결하시는 분들이 있을까봐(스스로 해봐야 이해가 될텐데)

하지만 이부분은 사진을 첨가해서 이해를 하는게 빠를것 같다고 생각해서 추가 하였다.

이런식으로 set을 해주어야 한다.

이떄 [] : 배열로 감싸준 이유는

내가 map을 이용하여 해당 data를 뿌리고 있기 떄문이다.

후기

정말 오늘이 가장 오래 걸렷다.

그만큼 해결을 하였을떄 너무 재밌고 희열감이 느껴졌다.

더 공부해볼 예정이고 아직까지도 코딩은 재미있다.

profile
[기술 블로그가 아닌 하루하루 기록용 블로그]

0개의 댓글