리액트를 처음 배워보면서 이해하는데 시간을 많이 투자해야 했다.
import React, { Component } from "react;
이 문장으로 리액트에서 Component 를 생성할 수 있게 해준다.
class Test extends Component {
render() {
return (👇);
}
}
해당 괄호 안의 내용이 화면에 표시될 내용이다.
class Test extends Component {
constructor() {
super();
this.state = {
value: "",
}
}
render() {
return ();
}
}
constructor 안에서 component 의 상태(state)를 저장해 둘 수 있다. 그때그댸 setState()
메서드로 값을 변경할 수 있다.
render() {
return (
<div>
<input type="text" </>
<button>submit</button>
<ul>
<li>hello</li>
</ul>
</div>
);
}
학습을 하기 위해 간단하게 댓글을 입력할 input 태그와 버튼, 그리고 댓글을 구현할 ul 태그를 화면에 띄웠다.
먼저 input 태그에 댓글이라는 값(value)을 입력하면 그 값을 가져올 수 있어야 한다. 그 후 state 의 value 를 업데이트 시켜줄 것이다.
<input onChange={this.getValue} type="text" />
👇
getValue = (event) => {
this.setState({
value: event.target.value,
})
}
input 태그에 onChange 이벤트가 발생하면 getValue 라는 메서드가 실행되는데 onChange 라는 event 그 자체를 인자로 받은 후 이벤트가 발생한 지점의 value 를 state 에 담는다.
이렇게 하면 입력한 값을 사용할 수 있다. 확인해 보고 싶다면 console.log(this.state.value)
를 render()
안에서 작성하여 확인해 볼 수 있다.
console.log
를 getValue 메서드 안에서 작성할 수도 있지만 render() 안에서 하는 이유를 알고 싶다면 동기와 비동기 에 대해서 공부해 보는게 좋다.
이제 input 에 입력한 값을 알 수 있으니, 버튼을 클릭하면 댓글창(li
) 에 추가할 수 있어야 한다. 그렇게 하기 위해서 원래 state 에 commentList 라는 key 에 빈 배열을 배치해 주었다.
constructor() {
super();
this.state = {
value: "",
commentList: [],
}
}
👇
<button onClick={this.addComment}>submit</button>
👇
addComment = () => {
this.setState({
commentList: this.state.commentList.concat([this.state.value]),
value: "",
})
}
이렇게 하면 버튼을 클릭해서 onClick 이벤트가 발생하여 addComment 메서드가 실행된다. 이때 setState() 메서드로 인해 기존의 state 의 commentList 라는 key 의 값은, 빈 배열에 입력한 값을 담은 배열을 붙인(concat
) 결과가 된다.
그리고 addComment 메서드는 commentList 와 동시에 value 또한 빈 문자열로 다시 setState 하고 있다. 이 부분은 댓글이 입력된 후 입력한 값이 input 에 남아있지 않도록 할 때 사용할 것이다.
이제 댓글을 추가할 위치에서 댓글이 추가되는 로직을 작성해야 할 차례다.
<ul>
<li>hello</li>
{this.state.commentList.map((comm, idx) => {
return <li key={idx}>{comm}</li>
})}
</ul>
map()
함수는 배열 안을 돌면서 콜백 함수를 인자로 받아 어떠한 함수처리를 해준 후 새로운 배열을 return 한다. 여기서 comm 은 입력한 값이고, 두번째 인자로는 배열의 index 가 들어온다.
key={idx}
부분은 작성하기 않을 시 아래와 같은 경고가 뜬다.
조금 더 자세히 공부해 보기 전까지는 결과를 조금더 안정적으로 출력하기 위해 작성하는 것이라고 생각하자. 그리고 key 값은 조금 특별한 값이 와야 하는 데 현재 로직의 경우 학습을 목표로 하는 것이기에 배열상에서 특별하다고 해야 하는 값은 index 밖에 없다고 판단된다. 실제로는 key 값으로 index 를 사용하는 경우는 최후의 수단으로 한다.
리액트에서 Component 는 재사용 가능한 ui 이기 때문에 <li></li>
안의 내용을 component 파일로 분리하여 관리할 수도 있을 것이다.
추가적으로 버튼을 클릭하여 입력하는 경우보다는 input 에서 입력한 후 Enter 버튼을 사용하는 경우가 많다.
이것을 가능하게 하기 위해서는 간단한 코드를 추가하기만 하면 된다.
<input onKeyPress={this.addCommEnter} />
👇
addCommEnter = () => {
if(e.key === "Enter"){
this.addComment();
}
}
이 글 보고 댓글기능 구현했어요ㅠㅠ 감사합니다 휘찬님!!!! 잘 보고 가요ㅠㅠ