코테/koans, 코플릿, sprint

6. React Twittler state-props

2023. 3. 27. 23:02

이번 스프린트를 하면서 새롭게 배운점을 작성해보자!!

 

 

 

filter 배열메소드를 통해

dummyTweets 배열에 있는 트윗목록 중에

유저이름이 parkhacker인 사람의 트윗만 가져오도록 하였다.

 


 

 

useState 훅을 사용하여

user에는 초깃값 "parkhacker",

msg에는 초깃값 "" 빈 문자열,

tweets에는 초깃값 dummyTweets를 주었다

 


 

 

handleChangeUser 함수가 호출 됐을때,

user를 setUser 데이터변경함수를 통해

event.target.value로 변경해주었다.

 


 

 

위의 내용과 마찬가지로,

handleChangeMsg 함수가 호출 되면,

msg를 setMsg 데이터변경함수를 통해

event.target.value로 변경해주었다.

 


 

 

Tweets을 하나씩 돌면서,

map메서드를 통해 익명의 콜백함수로

el이라는 매개변수를 주어,

Tweet컴포넌트에 tweet을 el로 주었다.

'코테/koans, 코플릿, sprint' 카테고리의 다른 글
  • 8. 재귀함수 코플릿
  • 7. StatesAirline - Client
  • 5. React Twittler Intro 풀이
  • 4. fetch를 이용한 데이터 요청, 응답
plla2
plla2
프론트엔드 개발자가 되고픈 개미의 일대기 🐜
plla2
코린이 "개미"의 개발블로그
plla2
전체
오늘
어제
  • 분류 전체보기 (112)
    • 프론트엔드 (40)
      • CSS (1)
      • JS (16)
      • React (17)
      • Redux (2)
      • TS (4)
      • Pre-project (0)
    • 프로젝트 회고, 리팩토링 (14)
      • 포트폴리오 프로젝트 (2)
      • moviepop 팀 프로젝트 (1)
      • lofi 프로젝트 (2)
      • 스택오버플로우 팀 프로젝트 (5)
      • commerce 프로젝트 (1)
    • 코테 (26)
      • koans, 코플릿, sprint (9)
      • 데일리 코딩 (17)
    • 백엔드 (5)
      • Node (4)
    • CS (6)
      • 알고리즘 (2)
      • 자료구조 (1)
      • 네트워크 (1)
    • 회고, 면접준비 (16)
      • Next.js Doc 번역 (7)
      • 면접 답변용 정리 (5)

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • 태그래핑
  • 데일리 코딩
  • 프론트엔드
  • 렉시컬
  • 상태
  • 동기 비동기
  • 리액트 라우터
  • 데일리코딩
  • 트리 자료구조
  • State
  • 비동기
  • React
  • 클래스형
  • Twittler
  • 단어의 시작
  • NodeList
  • 구조 분해 할당
  • 객체분해
  • 배열분해
  • camelCase
  • 페이지네이션
  • 정규식
  • 프로토타입
  • 중첩구조분해
  • js
  • 프로토타입 체인
  • HTMLCollection
  • dom
  • 배열렌더링
  • 블로킹 논블로킹

최근 댓글

최근 글

hELLO · Designed By 정상우.
plla2
6. React Twittler state-props
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.