1. 사건의 발단
- state값으로 form을 만들어서 입력된 값을 다시 state로 올려 렌더링 하는 작업을 하려고 하였다.
- 직접 state값을 수정해도 가능은 하지만 이는 지양해야 한다. useState를 이용하는 것이 옳다.
- 그래서 수정한 뒤 결과를 보니 게속 테스트가 통과되지 않는 것이다!!
- 정작 틀린 부분은 또 오타 때문이었다고 한다...
2. useState 만들기
const [msg, setMsg] = useState('');
const [name, setName] = useState('');
const [newFrind, setNewFrid] = useState([...FrindList]);
- 먼저, state를 정해주고 다른 파일의 FrindList를 가져왔다.
- 위의 msg와 name의 입력은 input의 text이고 그 내용은 생략한다.
3. 받아올 객체 폼 만들기
const frind = {
id: Math.floor(Math.random() * 100000), //거의 무작위에 가까운 id값을 줬다.
frindName: name,
content: msg,
};
- FrindList에 있는 id와 frindName, content를 이용해 똑같은 구조의 객체 폼을 만들었고, 입력된 내용을 받아 올 것이다.
4. useState로 state값을 변경해 준다.
const newFrindCopy = newFrind.slice(0);
newFrindCopy.unshift(frind);
setNewTweet(newFrindCopy);
- 계속 이어서, 우리가 직접 props로 받은 값을 바꿔주지 않기 위해 복사본을 slice로 만들고, 그 복사본에 unshift를 해서 state를 변경해 준다!
5. 렌더링 하기
const newFrinds = newFrind.map(newFrind => <Frind frind={newFrind} id={newFrind.id} />
- map을 사용해서 알맞은 컴포넌트에 우리가 얻어온 newFrind를 집어넣고, 어디든지 {newFrind}로 렌더링 할 수 있다.
이처럼 state값을 어느정도 자유롭게 사용할 수 있다고 생각한다. 복사본을 만들면 되니까 말이다. 물론 구조 분해 할당으로 간단하게 해결할 수 도 있지만 좀 더 직관적으로 이렇게 만들어 보았다. 다른 사람들은 조금 이상한 방법이라고 말하기도 했다. 결국 둘 다 잘 작동하니 상관은 없지만 사람들이 자주 사용하는 방법을 사용하는 것이 좋지 않을까?