1. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷함 2. 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성 HTML: onclick -> React: onClick 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 화살표 함수 문법으로 함수를 만들어 전달 렌더링 부분 외부에 미리 만들어 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 DOM 요소에는 이벤트를 설정할수 있지만 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음 3. 이벤트 종류 몇가지만 정리 해봤다. 나머지 이벤트는 리액트 매뉴얼 (http://facebook.github.io/react/doc..

1. 컴포넌트 종류 컴포넌트를 선언하는 방식은 두가지이다. 1. 함수 컴포넌트 2. 클래스형 컴포넌트 이렇게 두가지가 있다. 하지만 최근 클래스형 컴포넌트보단 함수 컴포넌트를 주로 사용한다. 다양한 이유가 있겠지만, 주요 이유는 1. 간단한 작성으로 가독성이 좋다. 2. 성능적인 부분에서 함수가 좀 더 효율적으로 사용할 수 있다. 3. 테스트 용이성 2. 컴포넌트 생성 생성 순서는 1. 파일 만들기 -> 2. 코드 작성하기 -> 3. 모듈 내보내기 및 불러오기 컴포넌트를 만들고자 할 때는 컴포넌트 코드를 선언해야 한다. const My Component = () => { return 함수형 컴포넌트 ; }; export default MyComponent; 3. 화살표 함수 function BlackDo..

React context 1. react context의 필요성 우리는 일반적으로 부모컴포넌트 -> 자식컴포넌트로 데이터를 전달해준다. 이를 props를 사용했다. 그러나 부모->자식-> 그의 자식-> 그의 자식의 자식 / 이렇게 너무 깊어지면 prop drilling 현상이 일어난다. prop drilling의 문제점은 1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로 왔는지 파악이 어렵다. 2. 어떤 컴포넌트에서 오류가 발생할 경우 오류 파악이 어렵다. 출처 : https://www.copycat.dev/blog/react-context/ Your Guide To The React Context API - CopyCat Blog This article explains the drawbacks ..

useRef란? useRef는 React Hooks의 하나로, DOM 노드나 다른 React 컴포넌트와 관련된 값을 기억하고 업데이트 할 수 있는 객체를 생성한다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. ); } export default App; 콘솔을 확인해보면, ref이 값은 이렇게 출력된다. 이 뿐만 아니라 변경이 가능하다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useR..

useState useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 한다. const [state, setState] = useState(initialState); 함수형 업데이트 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); 위 코드와 같이 setState의 ( )안에 수정할 값이 아니라 함수를 넣는 것이다. 그리고 그 함수의 인자에서 현재 state를 가져올 수 있고, { }안에서는 이 값을 변경하는 코드를 작성할 수 있습니다. // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return curren..

useEffect를 사용하는 이유 useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무엇가를 실행하고 싶다거나 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무엇가를 실행하고 싶을 때 useEffect를 사용한다. useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로, import React { useEffect } from 'react'로 import 해서 사용한다. useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행된다. 전체의 흐름은 아래와 같다. inpust 값을 입력 value 즉 state가 변경 state가 바뀌었기 때문에 → app 컴포넌트가 리렌더링 리..