문제의 핵심이란 것은 중요하지 않아.
가장 중요한 건 테스터기가 너의 코드를 어떻게 흠 잡을 것인가.
넌 잠을 잘수도 밥을 먹을수도 없게 만드는 건 리액트 문법이 아니라.
.
.
그렇게 월요일이 불타버렸다.
오늘 배운 것은 기억나지 않지만 더듬거려 본다면.
음....
진짜 뭐더라
그러니까 뭔가를 연결하고...
.
.
.
.
.
.
아 맞다
.
.
.
.
.
.
리액트 State & Props
부모로 부터 props를 통해 전달된다
시간이 지나도 변하지 않는다
컴포넌트 안의 다른 state나 props를 가지고 계산 가능
하다면 State 아님
딱히 복잡해 보이지 않지만 코드 속에 요 개념이 아른아른 하다면
개념잡기전에는 그 곳에 발 담그지 말길 바래
요넘들 보다도 애를 먹인 녀석들은
<Controlled Component>
요뇸들이다.
예라이 복잡한 것들
그러니까
[A,B] = useState(C)
이렇게 A 랑 B 는 바퀴와 핸들이고
기본 값이 C 라는 거져
전기 선 꼽는다 생각하면 편한데
아까도 말 했지만 코드의 연못에 요 녀석이 아른거린다면.
발 빼시라고.
왜냐하면 요 녀석들 속은
<div>{A}</div>
<input
type="text"
value={A}
onChange={(event) => B(event.target.value)}
placeholder="기본값"
></input>
요 따구로 꼬여있으니까.
일단 똑바로 보일 때 까지 노려보다가 명확 해 진다 싶으면
[A,B] = useState("C")
[D,E] = useState("")
[F,G] = useState(H)
요런 애들이 서로 엉겨붙어서
const Tweets = () => {
const [ username, setUsername ] = useState('parkhacker');
const [ msg, setMsg ] = useState('');
const [ tweets, setTweets ] = useState(dummyTweets);
const handleButtonClick = (event) => {
const tweet = {
id: tweets.length + 1,
username: username,
picture: 'https://randomuser.me/api/portraits/men/98.jpg',
content: msg,
createdAt: new Date().toLocaleDateString('ko-KR'),
updatedAt: new Date().toLocaleDateString('ko-KR'),
};
const newTweets = [tweet, ...tweets];
setTweets(newTweets);
};
const handleChangeUser = (event) => {
setUsername(event.target.value)
};
const handleChangeMsg = (event) => {
setMsg(event.target.value)
};
};
... 와이리 복잡노
고마 할랍니더. ㅠㅠ
아직 실력 없는 나부랭이지만
코드 쳐서 넣을 수록 일련의 포맷이 생기는 것 같다.
열심히 하다가 두 달 전에 짰던 코드 보면
코드가 웃김
어이가 없을 정도로 무식하게 덕지덕지 발라 놓은 것 같다.
어떤 모지리가 이렇게 짰냐.
.
.
.
.
.
5개월 남았다.
성장하자 모든 코드가 귀여워 질 때 까지.
아직 쫌 무섭다.
.
.
.
.
기존 배열에 새 엘리먼트 넣기
const newArr = [arr, ...arrs]
컴포넌트 리턴
arrs.map(arr=>{
return (<Arr key = {arr.id}
arr = {arr} />
)
}
.
.
.
.
.
그리고 잘 들어.
코드 무작정 짜지 말고 요구 명세 똑바로 보고 짜라.
그러다가 처음부터 다시 짜는 수가 있다?
.
.
.
(끔찍)
코드,, 귀여워 (대충 insert 귀여워 짤)