개발 기록 개발 기록

React

• [React] 컴포넌트 생명주기와 useEffect, clean up function

  React 2023. 10. 27. 14:50

  [ 컴포넌트의 생명주기 (Lifecycle) ] 1. 컴포넌트가 페이지에 장착(생성)될 때 => mount 2. 컴포넌트가 업데이트(재랜더링)될 때 => update 3. 컴포넌트가 삭제될 때 => unmount 이를 활용하면 컴포넌트가 mount, update, unmount 될 때 특정 코드를 실행할 수 있도록 개발이 가능하다. Lifecycle hook을 이용하면 되는데 쉽게 말하면 컴포넌트의 생명주기에 갈고리를 달아 간섭한다고 생각하면 된다. 쓰는 방법은 아래와 같이 useEffect를 사용한다. [ useEffect란? ] useEffect안의 코드는 컴포넌트가 mount, update 될 때마다 실행된다. 아래 버튼을 누를 때마다 화면이 재랜더링되므로 버튼을 누를 때마다 'hello'가 출력된..

  Read More
• [React] state 변경 함수의 동작 원리? ( + 스프레드 연산자 )

  React 2023. 10. 23. 17:54

  let [clickedCells, setClickedCells] = useState([]); // 클릭된 셀의 위치를 배열로 저장 var row = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; const handleCellClick = (i, j) => { setClickedCells([...clickedCells, {i,j}]); // 클릭된 셀의 위치를 배열에 추가 } 오목 게임 프로젝트 때 작성했던 코드이다. state를 만들어 클릭된 셀의 위치를 저장하는데 셀을 클릭할 때마다 클릭된 셀의 위치를 배열에 추가하는 함수를 만들어본 것인데, 이와 같이 array, object state 변경하는 법 및 동작원리에 대해 자세히 알아보고 싶어졌다. 아래 코드는 버튼을 클..

  Read More