본문 바로가기

React

 (29)
React - state, react가 render하는 방식 react의 변수같은 것. state를 바꾸면 react가 알아서 화면을 새로 렌더링 해준다. 화면을 조건에 따라 변경해야할 때 활용한다. state를 변경할 때 마다 화면을 새로그린다 // App.js import { useState } from 'react'; import Dice from "./Dice"; import Button from "./Buttom"; function App(){ const [num, setNum] = useState(1); const handleRollClick = () => { setNum(3); } return ( 던지기 처음부터 ); } export default App; import를 해준 후 사용할 수있다. state는 const를 사용해 만든다. 위 코드에서 u..
React - 예제 프로젝트 dicegame 만들기 이미지 가져오기 import diceblue01 from './assets/dice-blue-1.svg'; function Dice() { return ; } export default Dice; 위 코드와 같이 image태그를 import한 후, img태그의 src에 넣어서 사용해야한다. img태그의 src에 바로 경로를 작성하면 화면에 이미지가 그려지지 않는다.
React - component and props React Element root.render(안녕 리액트!); 위 코드는 아래와 같이 수정이 가능하다. const element = 안녕 리액트!; root.render(element); 그리고 element변수를 console에 찍어보면 자바스크립트 객체가 출력되는 것을 확인할 수 있다. 이 객체를 'React Element'라고 부른다. React Element를 render메서드에 전달하면, render메서드는 객체를 해석해서 HTML코드로 렌더링 시켜주는 것이다. React Element는 화면을 구성하는데 있어서 기본적이며 핵심적인 요소이다. React Component React Element를 함수형태로 만들면 jsx문법 작성시 커스텀 태그처럼 활용이 가능하다. import ReactDOM..
React - jsx문법 jsx란 import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(안녕 리액트!); 위 코드의 마지막줄을 보면 파라미터로 문자열이 아닌 html태그같이 생긴 값을 넘기고 있다. 이렇게 html태그를 사용하는 것은 jsx문법이라고 부른다. jsx문법은 자바스크립트와 html을 섞어쓸 수 있는 자바스크립트의 확장된 문법이다. 자바스크립트와 일치하는 문법 id 속성 root.render(안녕 리액트!); 위 코드와 같이 jsx문법 안에 id값을 넣을 수 있다. 자바스크립트와 다른 문법 class root.render(안녕 리액트!); class는 사용불가..
React - 개발 환경 세팅(MAC), 프로젝트 생성 및 실행하기 개발환경 세팅 node.js 설치 npm 설치(node.js설치시 같이 설치할 수 있다.) 터미널에 잘 설치되었는지 확인하기 node -v npm -v 개발툴 설치(vsCode, webStorm 등) chrome 브라우저 설치 크롬의 확장프로그램 React Developer Tools 설치 React 프로젝트 생성 npm init react-app . 터미널에서 "npm init react-app " 명령어를 입력하면 된다. 해당 폴더에 위치한 상태로 명령어를 입력할 경우, '.' 을 찍어 현재 폴더라고 알려준 것이다. React 프로젝트 실행 npm run start React 프로젝트 종료 ctrl + c 발생했던 에러 1. 프로젝트 생성시(npm init react-app . 입력시) 발생 해결 :..
react - 예외 처리 방법 1. UI 렌더링 과정의 예외처리 * Error Boundary(React 16에서 도입) - 해당 컴포넌트를 최상위 컴포넌트로 만들면, 생명주기에서 발생하는 모든 예외 처리 가능. - 자식 컴포넌트에서 에러 발생시 호출되므로, 메세지 렌더링에 실패하면 위쪽으로 전파됨. - getDerivedStateFromError : rener 과정에서 호출됨. Error 를 UI에 보여주는 용도로 사용. - componentDidCatch : 자식컴포넌트에서 오류 발생시, 가장 마지막에 호출. 에러 정보를 기록하는 등 side effect 용도로 사용. - ErrorBoundary컴포넌트로 처리되지 않은 에러 발생시, 모든 컴포넌트 언마운트. 따라서 폴백 UI를 보여줘야함. - 생명주기 메서드가 아닌 곳에서 발생한..
React - createContext, provider, reducer - 최상위에서 export const TableContext = createContext({ tableData: [], halted: true, dispatch: () => {}, }); // reducer는 case문으로. // action을 어떻게 처리할지 관리하는 함수 const reducer = (state, action) => { switch (action.type){ case START_GAME: return { ...state, data: { row: action.row, cell: action.cell, mine: action.mine, }, openedCount: 0, tableData: plantMine(action.row, action.cell, action.mine), halted:..
React - Hooks의 useState, useRef, useEffect, useMemo, useCallback 차이 * 공통점 - 얘네 전부 조건문안에 넣으면 안되고, 반복문, 함수에 웬만하면 넣으면 안된다. - 항상 최상위에 두기. - 다른 Hooks 안에서 또 다른애를 실행하면안된다. * 차이점 1) useState - 렌더링과 관련된 값. 2) useRef - 렌더링과 관련되지 않은 일반 값 3) useEffect - 대상을 인자로(배열로) 받음. - lifeCycle과 관련해 실행. - 대상별로 수행할 일이 다르면 여러번 써도 된다. - 대상배열이 빈 배열이면 바뀐 것이 없으니 다시 실행도 안된다.(무조건 componentDidmout 처럼 사용됨) 4) useMemo - 대상을 인자로(배열로) 받음 - 렌더링과 관련되지 않은 복잡한 결과 값을 기억. - useMemo 안에서 쓰이는 state 들은 두번째 인자..

티스토리툴바