React 기초 검색 결과

해당 글 7건

[React] useEffect 개념

[React] useEffect 개념 useEffect 개념 이번 게시글에서는 새로운 hook useEffect에 대해 알아보겠습니다. useEffect는 기본 hook으로 react의 life cycle을 확인할 수 있습니다. 해당 hooks은 잘 사용하면 좋지만 그렇지 않은 경우 버그를 유발하는 hook이 될 확률이 높습니다. 이번 게시글에서 한번 알아보겠습니다. 전체 코드 보러 가기 : 링크 ◆ useEffect - React life cycle react에서는 마운트, 언마운트 개념이 있습니다. 간단하게 설명하면 아래와 같습니다. 마운트 : 컴포넌트가 생길 때 언마운트 : 컴포넌트가 사라질 때 라고 생각하시면 편합니다. 그럼 useEffect로 마운트, 언마운트를 더 자세히 알아보겠습니다. 아래 ..
기타 (+ Legacy)/Legacy 2022. 6. 15. 05:34

[React] useRef 개념 및 실습

[React] useRef 개념 및 실습 useRef 개념 및 실습 (+ 작성하다 보니 전부 존댓말로 작성하여 그냥 앞으로 존댓말로 작성하겠습니다.) 이번 게시글에서는 새로운 hook useRef에 대해 알아보겠습니다. useRef의 사용 방법과 useState의 차이점에 대해 알아보겠습니다. 전체 코드 보러 가기 : 링크 ◆ DOM 접근 전체 코드 보러 가기 : 링크 useRef는 DOM에 접근하고 싶을 때 많이 사용합니다. JavaScript에서 document.querySelector() 와 같은 함수를 대신 사용한다고 생각하시면 됩니다. 그럼 어떻게 DOM에 접근할 수 있을까요? DOM에 접근하는 방법은 아주 간단합니다. useRef 변수를 선언한 후 DOM에 ref로 연결만 해주면 됩니다. 아래..
기타 (+ Legacy)/Legacy 2022. 6. 13. 05:22

[React] useState hook 이해하기

[React] useState hook 이해하기 useState hook 개인적인 생각에 useState hook만 이해하면 react의 50%는 이해했다고 생각한다. 기초적인 내용이지만 그만큼 react의 핵심 내용이라고 볼 수 있다. 따라서 해당 게시글에서 알아볼 내용이 꽤 많다. 자세히 읽어보면 분명히 많은 도움이 될 것으로 생각한다. (+ 현 게시글 대부분의 코드는 sudo code 이다.) ◆ useState 그래서 그 중요한 useState hook이 뭔데? useState는 배열을 return 해주는 함수이다. 코드로 먼저 살펴보면 아래와 같다. 간단하게 설명하자면 state : state setState : state를 변경시키는 함수 value : state의 초기값 위와 같이 작성하면 ..
기타 (+ Legacy)/Legacy 2022. 6. 6. 07:05

[React] React hooks 다루기

[React] React hooks 다루기 React hooks 다루기 소개 사실 react를 기초부터 설명하려고 했던 도전은 계속있었다. 그러나 어느 정도 하다가 계속 실패하였다. 실패의 원인을 분석하니 너무 자세하게 많은 것을 설명하려고 했던 것 같다. 간단하게 핵심만 설명해보도록 해야겠다. 해당 시리즈는 react를 전혀 모르면 어렵다고 생각된다. react가 뭔지는 아는데 정확히 모르겠다. 라는 사람에게 많은 도움이 될 것 같다. (+ 회사에서 신입들이 기초 잡는 것을 어려워 하는 것 같이 작성하는 것도 있다.) (+ 존댓말로 하고 싶었는데 이미 반말로 적어 반말로 간다.) ◆ 작성할 react 개념 - useState - useRef - useEffect - useCallback, useMemo..
기타 (+ Legacy)/Legacy 2022. 6. 5. 22:02

[React] input onChange 함수 확장성 있게 사용하기

[React] input tag onChange object 인 경우 간단하고 깔끔하게 사용하기 우연히 다른 사람의 코드를 보았는데 확장성 없게(?) 구현이 되어 있길래 가르쳐 주면서 블로그에도 기록해두려고 한다. (작성하는 코드는 전체 코드가 아닌 이해하는데 문제없도록 간단하게 구현하였습니다. 따라서 그대로 복붙하면 실행되지 않습니다.) input onChange 사용하기 React 입문할 때 state를 배우고, input element를 이용하여 state를 변경하는 방법을 배우곤 한다. 이때 tate 값이 object인 경우 보통 아래 처럼 구현을 많이 한다. (실제 인터넷 예시에도 저렇게 많이 되어 있다.) const [obj, setObj] = useState({ name: "" }); set..
기타 (+ Legacy)/Legacy 2022. 1. 15. 06:18

[Legacy][React] useRef, ref

[React] useRef, ref 란 무엇일까? React에서 제공하는 hook, useRef에 대해서 알아보자. (전체적인 코드는 작성하지 않음, 해당 git 링크에서 clone 받아서 확인 가능) useRef useRef는 무엇이고 왜 사용할까? 자세히 들어가면 한도 끝도 없고, 그 정도까지 알 필요도 없다(심화는 천천히). 간단하게만 알아보자. ref는 크게 2가지로 사용이 된다. 1. DOM에 접근한다. 2. 렌더링을 일으키지 않고 값을 변경시킨다. 우선 위 2가지를 알아보자. 1. DOM에 접근한다. JavaScript에서 DOM에 접근할 때 사용하는 여러가지 방법이 있다. DOM에 접근하는 대표적인 방법이 Document.querySelector(), Document.getElementByI..
기타 (+ Legacy)/Legacy 2021. 4. 13. 20:49

[Legacy][React] React 기초 및 개념

[React] React 기초 및 개념 React에 대해서 간단하게 알아보려고 한다. React 공식 홈페이지에서는 React를 다음과 같이 설명하고 있다. 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리. React를 학습하여 보다 더 사용자 인터페이스에 좋고, 빠르고, 효율적으로 웹 페이지를 구현할 수 있도록 해보자. React 학습 순서 (개인적인 생각) 여기서 말하는 React는 class 기반이 아닌 함수형 hook을 말하는 것이다. 1. CRA (create-react-app)을 이용하여 react 프로젝트 만들어보기 2. React state 란? 3. React useRef 란? 4. React useEffect란?, React hook 라이프 사이클 5. 간단한 개인 프로젝..
기타 (+ Legacy)/Legacy 2021. 3. 11. 21:15