공부블로그

Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다. 리액트 내장 Hooks를 사용하는 방법을 배우고 커스텀 Hooks를 만들어보자. 8. 1 ) useState useState는 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있도록 해준다. ( 3장에서 배움 ) Counter. js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 // value값 업데이트 setValue(val..

함수형 컴포넌트로 작성 App. js import React from "react"; import Counter from "./Counter"; const App = () => { return 컴포넌트; //props사용 }; export default App; Counter. js // input을 두개 받아서 + or - 버튼을 누르면 연산하기 import React, { useState } from "react"; //함수형 컴포넌트라 useState사용 const Counter = ({ role, children }) => { //props파라미터로 받기 const [number, setNumber] = useState({ one: "", two: "" }); //객체 초기값 const [resu..

import React from 'react'; import './App.css'; const App = () => { const name='리액트'; return {name}; } /* function App() { const name = '리액트'; return {name}; } */ export default App; - render( )필수 import React, { Component } from 'react'; class App extends Component { render() { const name='리액트'; return {name}; } } export default App; function App( ) { ... }, class App ..

모든 리액트 컴포넌트에는 라이프사이클( 수명주기 )이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하다 보면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 이때 컴포넌트의 라이프사이클 메서드를 사용한다. (라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있고, 함수형에서는 Hooks기능을 사용해 비슷한 작업을 처리할 수 있다.) 7. 1 ) 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이..

눈사람 얼음 눈 바람 웹 애플리케이션을 만들다 보면 위와 같이 형태가 계속 반복되는 경우가 있다. 리액트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법에 대해서 알아보자. 6. 1 ) 자바스크립트 배열의 map( )함수 map( ) : 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 변환하고 새로운 배열을 생성한다. 6. 1. 1 ) 문법 arr.map( callback, [thisArg] ) callback: 새로운 배열 요소를 생성하는 함수로 3개의 파라미터를 받는다. ( currentValue: 현재 처리하고 있는 요소, index: 의 인덱스값, array: 현재 처리하고 있는 원본 배열 ) thisArg: callback함수 내부에서 사용할 this 레퍼런스 6. 1. 2 ) 예제 ..

일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용한다. 이를 통해 css에서 특정 id에 스타일을 적용하거나, 자바스크립트에서 해당 id요소를 찾아 작업할 수 있다. 이와 비슷하게 리액트에서 DOM에 이름을 다는 방법이 바로 ref 이다. 우선 state를 사용한 예제를 작성해보자. App. js import React, { Component } from "react"; import ValidationSample from "./ValidationSample"; class App extends Component { render() { return ; } } export default App; ValidationSample. css .success { background-color: lightgre..

이벤트( Event ): 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것 예를 들어 HTML에서 DOM요소에 이벤트를 설정하는 방법을 살펴보자. //누르면 alert함수를 사용해서 executed문구의 메시지 박스를 띄움 Click me //이 문구의 버튼을 HTML에서는 이벤트를 실행하면 " " 사이에 있는 자바스크립트를 실행하도록 작성한다. 4. 1 ) 리액트의 이벤트 시스템 Say. js import React, { useState } from "react"; const Say = () => { const [message, setMessage] = useState(""); //useState의 인자에는 상태의 초기값을 넣어줌 const onClickEnter = () => setMessage..

리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때, 사용자가 볼 수 있는 요소는 여러가지 '컴포넌트'로 구성되어 있다. 컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 그에 맞추어 UI를 만들어 주기도 하고, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수도 있다. 이번 장에서는 새로운 컴포넌트를 만들고 사용하는 방법, 컴포넌트의 속성 값을 지닌 props와 상태 값을 지닌 state를 사용하는 방법을 알아보자. 3. 1) 클래스형 컴포넌트 - 2장에서 보았던 App컴포넌트는 함수형 컴포넌트이다. import React from 'react'; import ..