👨💻 늘 그렇지만 처음에 모르는 코딩개념을 보고 이해할려하면 확 와닿지가 않고 꽤나 애먹는다. 언어같은 건가보다. State와 Props도 마찬가지였다.
React의 State와 Props를 이해하기 위해 몇 가지 과제를 진행했다. 이번 포스팅은 그것에 대한 기록이다. 까먹기 전에 올린다.
이렇게 React의 컴포넌트를 통해 twitter를 만들었다. 저기 위에 username과 textbox안에 text를 집어넣으면 아래 트위터 묵록에 메세지와 유저네임, 시간과 날짜가 적혀서 추가되고 total 카운트도 올라간다. 게다가 mypage기능도 있으며 이곳에서는 내가 작성한 트윗들만 볼 수 있는 기능이 있다. 꽤나 섹시하다.
🤓 이것을 만들기 위해 React 컴포넌트 별로 여러개의 js파일을 사용했지만 그 중에서도 이것을 만드는 과정 중 가장 많은 지식들을 배웠던 Tweets.js 파일에 대한 기록들을 남긴다.
const Tweets = () => {
const [username, setUsername] = useState("");
const [msg, setMsg] = useState("");
const [tweets, setTweets] = useState(dummyTweets);
//React에서 State를 사용하는 방식이다.
//const = [계속해서 변하는 변수 값, 변수를 저장하는 공간] = useState(변하는 변수 값의 초기값)으로 알면된다.
const handleButtonClick = (event) => {
const tweet =
{
id: tweets.length + 1,
username: 'parkhacker',
picture: `https://randomuser.me/api/portraits/men/98.jpg`,
content: msg,
createdAt: new Date().toLocaleDateString('ko-kr'),
updatedAt: new Date().toLocaleDateString('ko-kr'),
};
setTweets([tweet, ...tweets]);
//여기서 ...는 비구조화 할당, 구조분해 할당이라고 한다.
//그냥 간단하게 말하면 배열[], 객체{} 안의 값을 편하게 꺼내 쓸 수 있는 문법이다.
//여기에는 내가 button을 클릭했을 때 추가되는 parkhacker의 tweet이 아래 map을 돌린 tweets과 함께 setTweets의 state에 보관된다.
//근데 왜 굳이 ...를 적어줘야 하는가?
//우리는 하나의 tweet만 추가하는 것이 아니라 계속해서 추가할 예정이기 때문에 ...를 앞에 적어주고
//let[a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6] 처럼 a1 ~ rest_a까지 유효범위의 배열요소들을 선언할 수 있게 되기 때문이다.
};
const handleChangeUser = (event) => {
setUsername(event.target.value);
};
const handleChangeMsg = (event) => {
setMsg(event.target.value);
};
//위의 두개 함수는 간단하다. event가 들어오면, setUsername()에다가 event.target.value를 저장하겠다는 것임
return (
<React.Fragment>
<div className="tweetForm__container">
<div className="tweetForm__wrapper">
<div className="tweetForm__profile">
<img src="https://randomuser.me/api/portraits/men/98.jpg" />
</div>
<div className="tweetForm__inputContainer">
<div className="tweetForm__inputWrapper">
<div className="tweetForm__input">
<input
type="text"
placeholder="your username here.."
className="tweetForm__input--username"
onChange={handleChangeUser}
value={username}
></input>
<textarea
placeholder="here is text area.."
className="tweetForm__input--message"
onChange={handleChangeMsg}
value={msg}
></textarea>
//onChange는 이곳에 변화가 일어나면(키보드 타입 등) handleChangeMsg 함수를 실행하겠다는 것이다.
</div>
<div className="tweetForm__count" role="status">
<span className="tweetForm__count__text">
{"total : "} {tweets.length}
</span>
</div>
</div>
<div className="tweetForm__submit">
<div className="tweetForm__submitIcon"></div>
<button className="tweetForm__submitButton" onClick={handleButtonClick}>Button</button>
</div>
</div>
</div>
</div>
<div className="tweet__selectUser"></div>
<ul className="tweets">
{tweets.map((el) => {
return (
<Tweet key={el.id} tweet={el} />
)})}
//여기는 다른 파일에 존재하는 tweets 데이터를 들고와서 map함수를 사용했고
//tweets배열의 각각의 요소들에 대해 컴포넌트를 만들어줘서 트위터 리스트를 만들었다.
//주의할 점은 React에서 map을 사용할 때, key값을 지정해줘야 에러가 나지 않는다는 것이다.
//꼭 id가 아니더라도 배열 안에서 unique한 숫자면 상관이 없다.
</ul>
<Footer />
</React.Fragment>
);
};💆♂️ 주석으로 배운점들과 흥미롭게 봤던 점들에 대한 설명들을 달아놨다.
💬
코딩은 진입장벽이 꽤나 높은 것 같다.
처음에 뭔말인지 하나도 모르기 때문에 지레 겁먹고 도망가는 사람들이 많기 때문이다.
다행인건 내가 도망가지 않았다는 것.
때로는 어렵지만 해내야하는 일들이 있다.
Notorious