react - iteration

iteration

01_key

배열 등을 이용하여 반복적인 컴포넌트 랜더링 하는 방법

key : 리액트에서 key는 컴포넌트 배열 랜더링 시 어떤 요소에 변동이 있는지 알아보기 위한 식별자의 역할을 한다.
key가 존재하지 않을 때는 가상돔과 원본돔 비교 과정에서 리스트를 순차적으로 다 비교하지만, key가 존재하면 어떤 변화가 일어났는지 더 빠르게 감지할 수 있다.

현재는 인덱스를 이용하여 key값을 설정했지만 이는 옳지 못한 방식이다.
인덱스는 요소에 변화가 생기더라도 항목의 순서에 따라 재부여되기 때문에 요소를 식별하지 못한다. 일반적으로는 DB에서 조회한 데이터인 경우 pk 컬럼 값을 key로 설정하면 된다.

고차함수 map을 이용해서 값 반환
map : Array.prototype.map : 배열 요소 전체를 대상으로 콜백 함수 호출 후 반환 값들로 구성 된 새로운 배열 반환

배열.map(function(currentValue, index, array)

currentValue : 현재 처리하고 있는 요소
index : 현재 처리하고 있는 요소의 index
array : 현재 처리하고 있는 원본 배열

<script type="text/babel">

const names = ['홍길동', '유관순', '윤봉길', '이순신', '임꺽정'];

        function Items({ names }) {

            return(
                <ul>
                    { names.map((name, index) => <li key={index}>{name}</li>) }   
                </ul>

            );

        }

        ReactDOM.createRoot(document.getElementById('root'))
            .render(<Items names={names}/>);



    </script>
    

02_iteration-sample

리스트형 컴포넌트 사용 예시

useState 배열 객체 생성

const [names, setNames] = useState([
                { id: 1, name: '홍길동' },
                { id: 2, name: '유관순' },
                { id: 3, name: '이순신' }
            ]);

useState 설정

const [inputText, setInputText] = useState('');
const [nextId, setNextId] = useState(4);            // 새로운 항목을 추가할 때 사용할 id, 4번부터 시작

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.

const onClickHandler = () => {

                // concat 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
                const changedNames = names.concat({
                    id : nextId,
                    name : inputText
                });

                setNextId(nextId + 1);
                setNames(changedNames);
                setInputText('');
            };