JS/React (11) 썸네일형 리스트형 3. React dev - Tic Tac Toe 게임 만들기 목차 1. Setup: 튜토리얼을 따라가기 위한 시작점 제공 2. Overview: React 기초인 컴포넌트, props, 상태(state)를 가르쳐 줌 3. Completing: React 개발에서 가장 일반적인 기술을 가르쳐 줌 4. Adding Time Travel: React만의 독특한 강점을 깊이 이해할 수 있도록 도와줌 1. Setup https://codesandbox.io/s/ljg0t8?file=/App.js&utm_medium=sandpack loving-fast-ljg0t8 - CodeSandbox loving-fast-ljg0t8 using react, react-dom, react-scripts codesandbox.io 2. Overview CodeSandBox에서는 주요 세 .. 2. React Quick Start - React.dev 정리2 5-1. 이벤트에 반응하기 컴포넌트 안에 EventHandler 함수를 선언하여 이벤트에 대하여 응답할 수 있다. export default function MyButton(){ function handleClick() { alert('클릭되었음..!'); } return ( 클릭하세요 ); } 이 부분을 본다면, HTML에서 onClick 이벤트를 줄 때와 같이 onClick={handleClick()} 괄호를 사용하지 않고 EventHandler 함수 자체를 전달하였다. 만약, onClick={handleClick()} 과 같이 괄호()를 사용하게 된다면, 버튼을 클릭을 했을 때가 아니라, 화면이 로드되었을 때 바로 alert창이 즉시실행되어 버린다. 5-2. 화면을 업데이트하기 버튼을 클릭한 횟수를.. 1. React Quick Start - React.dev 정리 배우게 될 것 1. 컴포넌트를 만들고 중첩하는 방법 2. 마크업과 스타일을 추가하는 방법 3. 데이터 표시 방법 4. 조건문과 리스트를 렌더링하는 방법 5. 이벤트에 반응하고 화면을 업데이트하는 방법 6. 컴포넌트 간 데이터를 공유하는 방법 1. 컴포넌트 생성 및 중첩 React 앱은 컴포넌트로 구성되어 있다. 컴포넌트는 UI(User Interface)의 일부분으로 자체적인 로직과 외형을 가지고 있다. 컴포넌트는 작은 버튼일 수도 있고 혹은 전체 페이지처럼 커다란 요소일 수도 있다. React 컴포넌트는 마크업을 반환하는 JavaScript의 함수이다 : function MyButton() { return ( 버튼 ); } 이렇게 MyButton을 선언하였고, 이제 다른 컴포넌트와 중첩할 수 있다. e.. 이전 1 2 다음
