인간이 되고 싶은 원숭이

오늘은 불타는 불토 🔥 남들은 불금이겠지만 항해99 하는 우리에게는 불토다 왜냐하면 주 6일 하고 유일하게 일요일만 쉴 수 있기 때문이지 ( 사실 일요일도 공식적으로 쉬는 날은 아님...ㅠ ) 오늘은 리액트 기초부터 쭉 봤다. 하지만 스스로 구현하는데 많이 막혔다 특히 props 를 가져다 component 를 만들고 자식이 그걸 가져다 쓰는 것에 대해서 애를 먹었다 그래서 계속계속 도전해봤다. 그러더니 뭔가 손에 익숙해지고 머리에 들어오는거 같다!! 쭉 코딩을 이어갔는데 다시 반복문에서 막혀버렸다... 우리가 지금까지 배워온 for 문이나 for in, for of(?) 를 사용하지않고 리액트에서 쓰이는 .map() 을 사용해보려고 노력을했다. 그런데 너무 어려운건 뭐지 행해 99 에서 숙제를 내준것에..

저는 이런 스텝으로 개발을 진행해보았습니다. 1. 일단 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장부터 할 것입니다. (중요한 데이터는 일단 저장해두는게 좋으니까요) 2. 버튼을 누르면 그 state를 [글제목이라는 state] 어레이의 뒤에 하나 뿅 추가할 것입니다. 이게 끝입니다. 그러면 알아서 글이 4개 보일 것입니다. 왜 4개가 알아서 보이냐고요? state 변경하면 HTML도 알아서 재렌더링 되니까요. 그러니 div를 하나 더 만들어주세요~ 이런 코드는 필요가 없습니다. state만 변경하면 됩니다. 1. 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장하려면 기억이 안난다면 바로 저번 시간 input 다루기 강의를 참고하시면 되겠군요. fun..

실제 사이트엔 이런 것들이 매우 많습니다. 여기에 입력된 값을 저장하거나 어디로 보내거나 그래야할 경우가 많은데 리액트에서 input 데이터는 어떻게 처리하는지 알아봅시다. 실은 쌩 자바스크립트 문법이랑 똑같습니다. 그리고 map 반복문 쓰면 콘솔창에 warning 뜨는 것도 마지막 부분에서 해결해보도록 합시다. 사용자가 input에 입력한 데이터를 state로 저장하는 법 사용자가 input에 입력한 데이터는 역시나 중요한 데이터기 때문에 state 저장해서 쓰는게 일반적입니다. 저장부터하는 법을 알아봅시다. 저장하려면 일단 빈 state가 하나가 필요할테니 state를 하나 만들어봅시다. function App (){ let [입력값, 입력값변경] = useState(''); return ( HTML..