웹 (17) 썸네일형 리스트형 [React] State로 상태관리하기 //App.jsimport { useState } from "react";import "./App.css";function App() { const state = useState(); console.log(state); return ;}export default App;결과를 두개의 요소가 들어있는 배열이 출력된다. 첫번째 값은 undefined로 값이 없고 두번째 요소 함수가 들어있는 것을 볼 수 있다. 첫번째 요소는 새롭게 생성된 state의 값이다. 만약 우리가 새로운 state를 생성하고 초기값을 숫자 5라고 설정한 뒤 콘솔로그를 통해서 확인해보면 이제는 첫번째 요소는 5가 나오는 것을 볼 수 있다. //App.jsimport { useState } from "react";import "./.. [React] Event Handling 이벤트란 웹 페이지 내부에서 발생하는 사용자의 모든 행동ex) 스크롤 내리기, 버튼 누르기, 메세지 입력이벤트 핸들링은 웹에서 발생한 이벤트를 처리하는 것 예를 들어서 버튼의 클릭이라는 이벤트가 발생했을 때 이벤트 핸들러는 onClick = {함수}를 버튼 태그 안에 작성하면 된다.여기서 함수는 함수의 결과를 전달하는 것이 아니라 함수 자체를 전달하는 것이다. (함수 이름만 쓰는 거야) 그리고 이벤트 객체라는 것이 존재한다.리액트에서 발생하는 모든 이벤트는 이벤트 핸들러 함수를 호출하면서 호출된 이벤트 핸들러 함수에 매개변수로 이벤트 객체라는 것을 제공함.출력해보면 SyntheticBaseEvent 라는 객체가 나옴. 한국말로 합성 이벤트 객체합성 이벤트는 모든 웹 브라우저의 이벤트 객체를 하나로 통일한.. [React] JSX로 UI 표현하기 리액트에서는 자바스크립트랑 HTML을 섞어서 사용 가능함그래서 그냥 리턴하는걸 넘어서 컴포넌트 내부에 변수도 선언하고 해당 변수를 HTML 태그 안에서 중괄호로 묶어서 사용 가능중괄호 안에서 변수, 문자열 작성, 연산, 삼항 연산자도 사용가능 //App.jsimport "./App.css";function App() { const abc = "hello"; const def = 20; return ( {abc} {def} {def + 20} {abc + " world"} {def > 20 ? 1 : -1} );}export default App;주의 1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있음 - 한 줄의 코드가 하나의 값으로.. [React] React Components 리액트에서는 자바 스크립트 함수가 HTML 태그를 반환하게 설정할 수 있다. 그리고 이러한 함수들을 '컴포넌트'라고 부른다. 컴포넌트의 이름은 함수의 이름을 따서 부른다. 만약 함수의 이름이 Header 라면 Header 컴포넌트라고 부른다. 함수를 선언할 때(컴포넌트를 만들 때)는 함수 선언식을 써도 되고 화살표 함수식을 써도 상관 없다. 주의1. 컴포넌트를 생성하는 함수의 이름의 첫 글자는 무조건 대문자- 그렇지 않으면 리액트는 내부적으로 해당 함수가 컴포넌트라는 것을 인지하지 못함 만약 내가 Header 라는 컴포넌트를 만들었고 이를 렌더링하려면?index.jsx(혹은 main.jsx) 가보면 가 렌더링 되고 있음. 따라서 App컴포넌트는 잘 렌더링 됨.//index.jsximport React f.. [React] react 공식문서 틱택토 시간여행 동작 이해 틱택토의 막바지에 시간 여행 부분이 살짝 햇갈렸다. 그래서 먼저 정리를 해보려고 한다. 먼저 시간 여행을 하는 방법은 버튼 리스트를 만들어서 #번째 move로 이동하여 그때의 기록을 가져오는 것이다. history state는 원본을 차곡차곡 배열을 배열 형태로 가지고 있기 때문에 모든 정보를 가지고 있다. 몇번째 move 인지에 대한 정보인지에 대한 변수가 필요하기 때문에 currentMove state를 선언하였고 이를 통해 #번째의 move에 접근한다. 버튼 리스트 중에서 어떤 버튼이 클릭되면(onClick) 해당 history로 이동할 수 있도록 setCurrentMove를 실행하도록 한다. 그러면 해당 컴포넌트가 '리렌더링'된다. 그러면 결과적으로 currentSquares도 값이 변한다. .. [React] TypeError 발생 거의 다 했는데 다음과 같은 에러가 발생했다.리액트에서 가장 빈번하게 발생하는 오류라고 한다. 발생 원인은 배열 요소로 접근할 수 없는 요소에 배열로 접근하려고 할 때 발생한다고 한다. 그래소 오류가 발생한 곳인 Board.js를 뒤져봤는데 특별한 문제점이 없었다. 오류에서 알려주는 라인은 모두 정상이었다. 📌해결방법 그래서 지피티한테 코드를 주고 물어본 결과 Game.js에서 문제점을 찾았다... 부끄러운 문제였다... legnth를 legnth라고 썼다. 스펠링이 틀렸다고 이런 문제가 발생했다. 이 자식은 스펠링이 틀렸는데 빨간줄을 주지도 않았다.다음부터는 배열 요소에 잘 접근한 것이라면 다른 파일에서 스펠링이 틀린 곳이 있는지 확인하는 것도 좋은 방법일 수 있겠다. [React] 파일을 컴포넌트별로 구분하기 리액트 공식문서를 보면서 틱택토 게임 만들기를 따라하고 있었는데 Game 컴포넌트가 갑자기 최상위 컴포넌트로 되어야하는 상황이었다. (Square 컴포넌트 빼고는 걍 App컴포넌트에 때려넣고 있었음...) 그냥 App 컴포넌트 안에서 간단하게 하려면 할 수 있었지만 파일들이 기능별로 구분되어있으면 좋겠다는 강박 아닌 강박이 있어서 파일들을 구분하기로 했다.그런데 이미 틱택토 게임 만들기를 따라하면서 App 컴포넌트에 다양한 함수와 state, 변수를 선언해버렸다. 이를 분리하느라 애먹었다. Square 컴포넌트는 시작부터 구분해 놓아서 이미 되어있었다.문제는 App 컴포넌트를 Board 컴포넌트와 Game 컴포넌트로 분리하는 작업이었다.처음에는 이것 저것을 마구잡이로 복붙을 하다가 방법(?)을 터득했다.. [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)를 호출하는 것은 .. 이전 1 2 3 다음
