반응형 웹17 [React] react 공식문서 틱택토 시간여행 동작 이해 틱택토의 막바지에 시간 여행 부분이 살짝 햇갈렸다. 그래서 먼저 정리를 해보려고 한다. 먼저 시간 여행을 하는 방법은 버튼 리스트를 만들어서 #번째 move로 이동하여 그때의 기록을 가져오는 것이다. history state는 원본을 차곡차곡 배열을 배열 형태로 가지고 있기 때문에 모든 정보를 가지고 있다. 몇번째 move 인지에 대한 정보인지에 대한 변수가 필요하기 때문에 currentMove state를 선언하였고 이를 통해 #번째의 move에 접근한다. 버튼 리스트 중에서 어떤 버튼이 클릭되면(onClick) 해당 history로 이동할 수 있도록 setCurrentMove를 실행하도록 한다. 그러면 해당 컴포넌트가 '리렌더링'된다. 그러면 결과적으로 currentSquares도 값이 변한다. .. 2024. 7. 10. [React] TypeError 발생 거의 다 했는데 다음과 같은 에러가 발생했다.리액트에서 가장 빈번하게 발생하는 오류라고 한다. 발생 원인은 배열 요소로 접근할 수 없는 요소에 배열로 접근하려고 할 때 발생한다고 한다. 그래소 오류가 발생한 곳인 Board.js를 뒤져봤는데 특별한 문제점이 없었다. 오류에서 알려주는 라인은 모두 정상이었다. 📌해결방법 그래서 지피티한테 코드를 주고 물어본 결과 Game.js에서 문제점을 찾았다... 부끄러운 문제였다... legnth를 legnth라고 썼다. 스펠링이 틀렸다고 이런 문제가 발생했다. 이 자식은 스펠링이 틀렸는데 빨간줄을 주지도 않았다.다음부터는 배열 요소에 잘 접근한 것이라면 다른 파일에서 스펠링이 틀린 곳이 있는지 확인하는 것도 좋은 방법일 수 있겠다. 2024. 7. 10. [React] 파일을 컴포넌트별로 구분하기 리액트 공식문서를 보면서 틱택토 게임 만들기를 따라하고 있었는데 Game 컴포넌트가 갑자기 최상위 컴포넌트로 되어야하는 상황이었다. (Square 컴포넌트 빼고는 걍 App컴포넌트에 때려넣고 있었음...) 그냥 App 컴포넌트 안에서 간단하게 하려면 할 수 있었지만 파일들이 기능별로 구분되어있으면 좋겠다는 강박 아닌 강박이 있어서 파일들을 구분하기로 했다.그런데 이미 틱택토 게임 만들기를 따라하면서 App 컴포넌트에 다양한 함수와 state, 변수를 선언해버렸다. 이를 분리하느라 애먹었다. Square 컴포넌트는 시작부터 구분해 놓아서 이미 되어있었다.문제는 App 컴포넌트를 Board 컴포넌트와 Game 컴포넌트로 분리하는 작업이었다.처음에는 이것 저것을 마구잡이로 복붙을 하다가 방법(?)을 터득했다.. 2024. 7. 10. [React] props로 함수를 넘겨줄때 주의 할 사항 const [squares, setSquares] = useState(Array(9).fill(null));const handleClick = (i) => { const nextSquares =squares.slice(); nextSquares[i] = "X"; setSquares(nextSquares);};...위와 같이 함수를 인수로 전달하게 되면 작동하지 않는다. handleClick(0)은 setSquares를 호출하고 setSquares를 호출하면 App 컴포넌트의 state를 변경하는 것이기 때문에 App 컴포넌트가 '리렌더링'된다. 하지만 이 리렌더링 과정에서 다시 handleClick(0)은 호출되고 무한 루프에 빠진 것이다. 즉, handleClick(0)를 호출하는 것은 .. 2024. 7. 10. [React] Props로 데이터 전달하기 React에서는 페이지를 컴포넌트라는 단위로 나누어서 블록을 조립하는 것과 같이 개발합니다. 따라서 react로 어떤 사이트의 해더를 개발한다고 한다면 우리는 이를 컴포넌트로 나누어서 개발해야 할 것입니다. 만약 네이버의 해더를 구현한다고 가정해봅시다. 그렇다면 간력하게 먼저 Search 컴포넌트가 필요할 것 같습니다. 그리고 그 밑에 있는 이동 버튼 들은 아이콘만 다르고 다 똑같이 때문에 하나의 Button 컴포넌트를 이용하면 만들 수 있겠습니다. 그렇다면 각각의 버튼 컴포넌트가 하나는 메일, 하나는 카페, 하나는 블로그를 나타내야할 것입니다. 이를 위해서는 어떤 버튼을 렌더링할 것인지 결정하기 위해서는 우리는 각각의 버튼 컴포넌트에 값을 전달해 주어야 할 것입니다. 함수를 호출할 때 인수를 전달하는.. 2024. 7. 8. 이전 1 2 3 다음 반응형
