과정 기록용.
🚜 Mission 1) Login | 사용자 입력 데이터 저장 (✔완료)
ID, PW
<input>에 입력된 값을 State에 저장해주세요.
하는 중!! 그런데 저장되었는지 알 수 있는 방법을 모르겠어요ㅠㅠ
연욱님에게 여쭤보니 State로 값이 변경되고있기 때문에 render() 안에 console.log(this.state)를 찍어보라고 하셨음!
(return() 안에 console.log 찍으면 안 찍힘=_=)
해봤더니 뭔가가 찍히긴하는데.. 흠.... 나는 성공한 것인가?? 여쭤봐야겠다...
(연욱님에게 질문 후..)
성공한거래요!!!!!!!!!!!! 끼야악 🤸🤸🤸
🚜 Mission 2) Login | 로그인 버튼 활성화 (validation) (✔완료)
입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요.
🔨수정 전 코드
handleChange = e => {
this.setState({
userId: e.target.value,
userPw: e.target.value,
});
};
문제점이 생겼다 !!!
id에 골뱅이@가 들어가면 버튼 활성화 되게 하기 ← 까진 되는데 비밀번호를 입력하면 버튼 활성화가 꺼져버린다..... !!!
원인을 계속 생각해보았다.
🔨수정 후 코드
handleChange = e => {
const userId = e.target.name;
const userPw = e.target.value;
this.setState({
[userId]: userPw,
});
};
const를 밖으로 빼고 id와 pw를 묶어주었다. 일단은 성공!
그러나 const userId = e.target.name;에서 name을 value로 고치니까 또 버튼 활성화 적용이 안됨. 리액트 초보인 본인은 아직 이유를 파악하지 못했다ㅠ
🚜 Mission 3) Main | 댓글 기능 (✔완료)
사용자가 댓글 입력 후 enter 키를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현해주세요.
수업 시간에 배운 state를 사용하고 위에서 로그인 입력 데이터가 넘어오는지 확인할때 사용한 console.log를 활용해서 댓글이 입력되는지부터 확인해보았다.
constructor() {
super();
this.state = {
comment: '',
commentList: [],
};
}writeComment = e => {
this.setState({
comment: e.target.value,
});
};render() {
⭐console.log(this.state.comment);
return (
<>
<input
type="text"
id="input"
value={this.state.comment}
placeholder="댓글 달기..."
/>
</>
);
}
}
댓글 입력은 되고있다! 이제 화면에 뿌려주기만 하면 된다
🔨수정 후
addCommment = () => { // 댓글 쓰고 입력하는 함수
this.setState({
commentList: this.state.commentList.concat([this.state.comment]),
comment: '',
});
};
enterKey = e => { // Enter 키로 댓글 입력하는 함수
if (e.key === 'Enter') {
this.addCommment();
}
};<input
type="text"
id="input"
value={this.state.comment}
placeholder="댓글 달기..."
onChange={this.writeCommment}
onKeyPress={this.enterKey}
/>
<button
type="button"
class="reply-btn"
onClick={this.addCommment}
>
게시
</button>
굿굿~~~ 댓글 기능 구현은 완료!
이제 댓글 내용 앞에 id도 나오게 하려고 css 적용을 해주었다.
<ul className="comment_list">
{this.state.commentList.map(comment => {
return (
<li className="comment_box">
<span className="comment_id">zzz_yk</span>
{comment}
</li>
);
})}
</ul>.comment_list {
margin-bottom: 10px;
margin-left: 13px;
.comment_box {
margin-bottom: 5px;
}
.comment_id {
margin-right: 5px;
font-weight: bolder;
}
}
Goooooood 👍🏻
🚜 Mission 4) Main | 댓글 컴포넌트화 + props로 데이터 전달 (✔완료)
- map 함수를 활용해 댓글 목록을 구현해주세요.
- 댓글 하나를 컴포넌트화 시켜주세요.
- 필요한 데이터를 props로 넘겨주세요.
사실 문제 이해가 잘 안갔다.. 그래서 사전스터디 팀원들과 이렇게 하는게 맞는건지 잠시 토론을 했음ㅋㅋㅋㅋ
일단 내가 이해한 대로 풀어보았다!
👇🏻Comment.js
import React from 'react';
import './Comment.scss';
class Comment extends React.Component {
render() {
const { commentList } = this.props;
return (
<>
<ul className="comment_list">
{commentList.map((comment, i) => (
<li key={i} className="comment_box">
<span className="comment_id">zzz_yk</span>
{comment}
</li>
))}
</ul>
</>
);
}
}
export default Comment;👇🏻Comment.scss
댓글 <ul>부분 css를 분리해주었다.
.main_body {
.mainWrap {
.main {
div.feeds {
.feeds_text_top {
display: flex;
margin-top: 5px;
align-items: flex-start;
flex-direction: column;
strong {
font-weight: bolder;
}
.comment_list {
margin-bottom: 10px;
margin-left: 13px;
.comment_box {
margin-bottom: 5px;
}
.comment_id {
margin-right: 5px;
font-weight: bolder;
}
}
}
}
}
}
}👇🏻Main.js
원래 댓글 <ul>가 있던 곳에 다음과 같은 코드를 넣어줬다!
<Comment commentList={commentList} />
똑같이 댓글작성이 잘 되지만 이게 과제가 의도한 바인지는 모르겠다.
🚜 Mission 5) map 함수 적용시 key props를 부여하는 이유
🌵 후기 : 주말을 하얗게 불태웠다. 현재 시간 월요일 오전 5:06분...
