오늘 새로 배운 것
Key
react에서 매우 기초적인 부분이지만 놓쳤던 부분을 확인하게 되었다. 바로 key에 대한 원리이다.
key는 생성된 여러 item 중에서 어떤 item에 변경이 생기는지 알아차릴 수 있게 해야하기 때문에 stable하고 unique한 값이어야 한다.
그리고 좀더 살펴본 바로는 key값은 배열 안에서 주어져야 한다고 한다.
(Keys should be given to the elements inside the array to give the elements a stable identity:)
key에 index값을 할당하는 것은 성능에 부정적인 영향을 주고 컴포넌트 상태에 이슈를 일으키기 때문에 권장되지 않는다고 한다.
참고 : https://reactjs.org/docs/lists-and-keys.html#keys
여기부터는 직접 내가 todolist의 해당 item을 삭제하는 기능을 간단히 구현해보면서 알게 된 것인데, 결론적으로 부모 컴포넌트에서 자식에게 key값으로 todo.id를 전달하는데 자식 컴포넌트에서 key 위치에 매개변수를 두어서 받아서는 안된다는 것이다. 아래에서 차근히 확인해보면,
일단 삭제 버튼 클릭에 대한 이벤트를 정의하고,
Todo라는 자식 컴포넌트에 여러 todo 객체를 가진 todos로부터 각 todo의 id값을 key에 할당해서 전달한다.
문제는 여기부터다. 아래 사진은 부모 컴포넌트가 key까지 포함 3개의 인자를 전달했지만 자식 컴포넌트가 2개의 매개변수로 todo 객체와 삭제 이벤트가 정의된 deleteBtn 함수를 받은 경우인데 이 경우에는 동작하지만
만약에 3개의 인자를 전달한다고 해서 그 key값을 받으려고 key값을 받는 매개변수(예를 들면 targetID)를 받게 되면 이 targetID는 undefined값이 들어오는 것을 콘솔로 확인할 수 있다. 그리고 삭제 버튼을 누를 때 해당 todo만 삭제될 것을 기대한 것과 달리 아무 일도 발생하지 않는다.
이런 콘솔 에러도 뜬다.
Warning: Todo: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.
그래서 todo라는 다른 prop안에 있는 todo.id를 deleteBtn 함수로 전달하고 react는 이 id에 해당하는 요소를 key값으로 이미 인지한 바 있기 때문에 원하는 삭제 기능이 동작하는 것 같다.
React Native
flex: 1, 2, 3
화면에서 차지하는 비율이다.
flex: 2면 1보다 2배 넓은 것
하루를 돌아보며...
오늘은 react native를 처음으로 공부했는데 react랑 약간 다른 부분이 있어서 좀 더 복잡하게 느껴졌다.
StyleSheet.create()라는 것으로 요소에 style 속성을 줄 수 있는게 뭔가 styled-component보다 더 깔끔해보이는 것 같다. 과제로 레이아웃을 일단 구현해봤는데 css 공부가 좀 부족하다보니 의도대로 정렬이 잘 안되는 것 같다. 이번 기회에 반응형이나 이런 부분도 공부를 좀 해야할 것 같다.
