React, 댓글

msjulyone·2020년 10월 10일
2

React, 댓글

초기 state 설정!

this.state에 댓글창(input태그)의 초기값을 비었다고 설정!
인스타그램을 만들어 보고 있으니까 내 아이디 jeon.92도 초기값에 설정!
그런다음 댓글 입력할때 모으기 위하여 배열을 만들고 그 안에 비어있는 string 값 설정!

사용할 함수 설정!

댓글창에 입력한 값 저장하는 함수 생성

댓글을 입력할 때마다 value값 저장!
setState을 사용하여 초기 state값에 업데이트!
this.state로 직접 수정하면 안됨!

댓글을 추가할 함수 생성

현재 컴포넌트의 빈배열 상태에 내 아이디를 push!
초기 설정에서 만든 배열 안에 비어있는 string에 현재 컴포넌트의 댓글 입력값을 저장하고 id처럼 push!

댓글추가를 실행하기 위한 엔터함수 생성

enter키를 눌렀을때 댓글추가함수가 실행된다!
실행 된 후 입력창을 초기화 하는 센스!

render() 부분 설정!

ul

미리 생성한 ul태그 안에 입력받은 댓글을 map 매소드를 사용하여 li태그와 그안에 데이터를 엔터키 입력할때마다 추가하도록 설정!

input

input 태그 안에 onChange 속성에 댓글창에 입력한 값 저장하는 함수를 실행하도록 설정!
onKeyPress 속성에는 댓글추가를 실행하기 위한 엔터함수를 실행하도록 설정!
엔터함수가 실행되면 그 안에서 댓글이 추가되는 함수가 실행됨!

button

onClick 매소드에 댓글이 추가되는 함수를 설정!

1개의 댓글

comment-user-thumbnail
2020년 10월 12일

점점 글이 길어지고 있는 모습 보기 좋습니다~

답글 달기