본문 바로가기

Programming/React33

[React] Hooks - useState Hooks에서 처음으로 다뤄볼 기능은 useState였습니다. 예전에 살짝 어떤 느낌이다만, 소개했고 이번엔 그 본격적인 사용 방법을 다루려고 합니다. 1. useState useState는 함수형 컴포넌트 내부에서 state 값을 관리(변경 등)을 하기 위해 사용하는 Hook입니다. 그러면 실제 사용을 통해 useState를 알아보겠습니다. 다음은 버튼에 따라 글자와 문자가 변하는 간단한 컴포넌트입니다. import React, {Fragment, useState} from 'react'; const ColorChanger = () => { const [colorText, setColorText] = useState('검정'); const [color, setColor] = useState('black.. 2021. 11. 15.
[React] Hooks 그동안 여러번 언급이 되었던 Hooks. 이제 드디어 Hooks에 대해서 알아볼 시간이 되었습니다. 1. Hook Hook는 리액트 버전 16.8부터 새로 추가된 기능입니다. 이 Hook를 이용하면 기존 클래스형 컴포넌트들에서 이용하던 기능들을 함수형 컴포넌트에서도 이용할 수 있게 되었습니다. Hook가 등장해서 쓰이게 된 계기는 맨 아래 참조의 공식문서에 써있으니 한 번 읽어보시길 권해드립니다. 귀찮으신 분들을 위해 요약하자면 class형 컴포넌트 문법에서 오는 여러 난해함(특히 자바스크립트의 this)들이 주는 어려움과 재사용의 방해를 개선하기 위해 비교적 사용성이 뛰어난 함수형 컴포넌트에서 class형의 상태관리 등을 이용하기 위해 개발된 것이라고 합니다. 이제, 다음부터 나올 몇 개의 포스팅들을 .. 2021. 11. 12.
[React] ref 1. ref HTML을 작성할 때 요소에 식별가능한 유일한 이름을 줄때 id를 이용했습니다. 그리고 id를 가지고 이런저런 작업들을 했었는데 이 기능을 리액트에서 이용할 수 있게 해주는 게 ref입니다. ref는 리액트에서 컴포넌트에 이름을 붙여주는 것 입니다. id를 쓰면 자바스크립트~리액트 모든 곳에서 접근할 수 있는데 왜 굳이 리액트에서 ref를 따로 사용하냐면, id속성은 유일한 중복되지 않는 이름입니다. 그래서 리액트 특성상 종종 같은 컴포넌트를 여러번 사용할 때가 있는데, 이렇게 된다면 id가 중복되어서 오류가 발생해버리고 맙니다. 그래서 ref를 id대신 사용하도록 권장되고 있습니다. 리액트의 기능이니 만큼 ref는 리액트 컴포넌트 내부에서만 작동하기에 외부와 충돌할 염려도 없다는 것도 하나.. 2021. 11. 12.
[React] 컴포넌트 생명주기 리액트의 컴포넌트는 생성부터 소멸까지 생명 주기(라이프 사이클)를 가지고 있습니다. 개발자는 이 생명주기 함수들을 이용해서 생성부터 사이의 원하는 시점에 동작을 삽입할 수 있습니다. 1. 컴포넌트 라이프 사이클 메소드 서론에서 간단히 소개했듯이 리액트의 모든 컴포넌트들은 생명 주기를 가지고 동작합니다. 단순히 만들고 실행!에서 끝나는 것이 아니라 만드는 순간부터 실행 종료 사이사이 모든 순간들을 메소드로 나누어 관리합니다. 이것들을 컴포넌트 라이프 사이클 메소드라고 합니다. 컴포넌트 라이프 사이클 메소드는 클래스형 컴포넌트에서만 직접 사용이 가능하지만 함수형 컴포넌트에서 Hooks 기능을 이용해서 사용할 수 있습니다. 이 포스트의 현재 목적은 라이프 사이클 메소드의 이해이므로 Hooks를 이용한 방식은 .. 2021. 11. 10.
[React] 리액트의 이벤트 핸들링 리액트가 전반적으로 사용자의 UI와 밀접한 관계를 갖고 있기 때문에 당연히 이벤트 핸들링과도 깊은 연관이 있습니다. 그렇기에 다음 단계로 넘어가기 전에 간단하게 리액트의 이벤트 처리를 알아보고 넘어가겠습니다. 1. 이벤트 이벤트는 브라우저 내에서 일어나는 모든 행동들 입니다. 클릭하거나, 스크롤하거나, 드래그하거나, 접속하거나, 페이지가 로딩되는 것도 이벤트입니다. 좀 더 전문적으로 이야기 하자면 사용자가 DOM과 상호 작용하게되는 행동들을 이벤트라고 합니다. 리액트도 사용자 UI의 View를 담당하는 만큼 사용자와의 상호작용이 가장 먼저, 많이 일어나게 됩니다. 리액트가 지원하는 이벤트로는 Focus, Keyboard, Mouse, Touch, Wheel, Media, Image 등 수많은 이벤트가 있.. 2021. 11. 4.
[React] State - 함수형 컴포넌트의 state와 주의점 지난번에 클래스형 컴포넌트의 state를 다뤘습니다. 이번엔 함수형 컴포넌트의 state를 다룰 차례입니다. 함수형 컴포넌트에서는 바로 state에 접근할 수 없고 useState 함수를 통해서 state에 접근할 수 있습니다. 1. useState useState 함수는 함수형 컴포넌트에서 state를 조작할 수 있게 해주는 기능입니다. useState는 Hooks 기능 중 하나입니다. useState 함수가 처음 만나게되는 Hooks 가 되겠네요. 이것을 배우기 위해 '배열 비구조화 할당'이란것을 사용하겠는데, 이것에 대한 설명은 아래를 참조해주세요. https://bamtory29.tistory.com/entry/Javascript-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4.. 2021. 11. 3.
300x250

티스토리툴바