언어 (21) 썸네일형 리스트형 [React] State Hook 사용하기 Hook 소개에서 아래 예시를 통해 Hook과 친해졌습니다. import React, { useState } from 'react'; function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 아래의 클래스 예시와 비교하며 Hook의 특징에 대해 배울 예정입니다. Hook과 같은 기능을 하는 클래스 예시 React에서 클래스를 사용해봤다면, 아래의 코드는 익숙할 겁니다. class Example extends React.Component { constructor(p.. [React] Hook 개요 Hook은 하위 호환성을 가지고 있습니다. 이 문서는 React에 경험이 있는 사용자를 대상으로 Hook에 대해 간략히 소개합니다. State Hook 버튼을 클릭하면 값이 증가하는 간단한 카운터 예시가 여기 있습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새 상태 변수를 선언합니다 const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 여기서 useState가 바로 Hook입니다. Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추.. [React] Hook 소개 Hook의 개요 Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } useState라는 새로운 함수는 우리가 "Hook"에서 처음 배우게 될 함수입니다. 이 페이지에서는 왜 우리가 Hook을 React에 추가했는지, 그리고 어떻게 Hook이 어떤 도움을 주는지 설명할 것입니다. Hook의 특징은.. 코어 자바스크립트 - 모듈 내보내고 가져오기 코어 자바스크립트 - 모듈 내보내고 가져오기 export와 import 지시자는 다양한 방식으로 활용된다. 이전 챕터에서는 export와 import의 다양한 사용법을 배워보자. 선언부 앞에 export 붙이기 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. 선언부와 떨어진 곳에 export 붙이기 선언부와 export가 떨어져 있어도 내보내기가 가능하다. import * 무언갈 가져오고 싶다면 아래와 같이 이에 대한 목록을 만들어 import {...} 안에 적어주면 된다. 가져올 것이 많으면 import * as 처럼 객체 형태로 원하는 것들을 가지고 올 수 있다. 이렇게 한꺼번에 모든 걸 가져오는 방식을 사용하면 코드가 짧아진다. 하지만 어떤 걸 가져올 땐 그 .. 코어 자바스크립트 - 모듈(module) 코어 자바스크립트 - 모듈(module) 개발하는 어플리케이션의 크기가 커지면 파일을 여러 개로 분리해야 한다. 이 때, 분리된 파일 각각을 모듈(module)이라고 부른다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 여러개의 함수로 구성된 라이브러리 하나로 구성된다. 모듈이란? 모듈은 단지 파일 하나에 불과하다. 스크립트 하나는 모듈 하나이다. 모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능하다. export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다. import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있다. 위 예시에서 import 지시자는 상대경로.. 이전 1 2 3 다음
