WebMaster

현재 상태, 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태로 반환하는 함수 새로운 상태는 항상 불변성을 지켜야 된다. function reducer(state, action){ return { ... }; //불변성을 지키면서 업데이트한 새로운 상태를 반환 } action을 형태 { type : 'INCREMENT', ... //다른 값이 필요할 경우 추가로 들어감 } import React, { useReducer } from "react"; function reducer(state, action) { //action.type에 따라 다른 작업 수행 switch (action.type) { case "INCREMENT": return { value: state.value + 1 }..

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hooks이다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 된다. 예제 import React, { useEffect, useState } from "react"; const Info = () => { const [name, setName] = useState(""); const [nickname, setNickname] = useState(""); useEffect(() => { console.log("렌더링이 완료되었습니다.!"); console.log({ name, nickname, }); }); const onChangeName = (e) => { setNa..

Hooks : 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서 상태 관리를 할 수 없던 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공 useState : 함수형 컴포넌트에서 가변적인 상태를 지닐수 있게 해 준다. import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Counter; const [value, setValue] = useState(0);..

import react, { Component } from "react"; class LifeCycleSample extends Component { state = { number: 0, color: null, }; myRef = null; //Ref를 설정할 부분 constructor(props) { super(props); console.log("constructor"); } static getDerivedStateFromProps(nextProps, prevState) { console.log("getDerivedStateFromProps"); if (nextProps.color !== prevState.color) { return { color: nextProps.color }; } return ..

render() 메서드 컴포넌트 모양새를 정의한다 라이프사이클 메서드 중 유일한 필수 메서드이다. 해당 메서드 안에서 this.props, this.state에 접근할 수 있으며, 리액트 요소를 반환한다. Div, 따로 선언한 컴포넌트가 요소가 될 수 있고, null값이나 false값을 반환하여 아무것도 안 보여줄 수 있다. 이 메서드 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안 되며, 브라우저의 DOM에 접근해서도 안된다. DOM 정보를 가지고 오거나 state에 변화를 줄 때는 componentDidMount에서 처리하여야 한다. Constructor 메서드 constructor(props) {... } 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행된다. 초기 st..

총 9종류의 라이프사이클 메서드가 존재한다. Will 접두사 붙은 메서드 = 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사 붙은 메서드 = 어떤 작업을 작동한 후에 실행하는 메서드 총 3가지 마운트 -> 업데이트 -> 언마운트 흐름이 존재 마운트 : DOM이 생성되고 웹 브라우져상에 나타나는 것 호출되는 메서드 종류 constructor = 클래스 생성자 메서드 getDerivedStateFromProps = props에 있는 값을 State에 넣을 때 사용하는 메서드 render = 우리가 준비한 UI를 렌더링 하는 메서드 componentDidMount = 컴포넌트가 웹브라우저상에 나타난 후 호출하는 메서드 업데이트 : props가 바뀌거나, state가 바뀌거나, 부모 컴포넌트가 리 렌더..

초기 상태 설정하기 import react, { useState } from "react"; const IterationSample = () => { const [names, setNames] = useState([ { id: 1, text: "눈사람" }, { id: 2, text: "얼음" }, { id: 3, text: "눈" }, { id: 4, text: "바람" }, ]); const [inputText, setInputText] = useState(""); const [nextId, setNextId] = useState(5); const namesList = names.map((name) => {name.text}); return {namesList}; }; export default It..

key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다. 키가 없을 경우에는 VirtualDOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지 키가 있을경우 이 값을 사용하여 더욱 빠르게 어떤 변화가 있었는지를 감지할 수 있다. key값을 설정할 때에는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다. example const articleList = articles.map(article => ( ); 게시판을 게시물 번호를 key로 설정하면 된다. 만약 고유번호가 없는 반복적인 컴포넌트일 경우 map함수에 전달되는 콜백함수의 인수인 index값을 사용한다. import react from "react"; con..

import react from "react"; const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; 가 반복된다 -> 컴포넌트의 반복의 어떻게 해결할까? 자바스크립트 배열 객체의 내장함수인 map 함수를 통해 반복되는 컴포넌트를 렌더링이 가능하다. map함수는 파라미터로 전달된 함수를 사용해 배열 내 요소를 원하는 규칙에 따라 변환후 새로운 배열을 리턴 arr.map(callback,[thisArg]) callback = 새로운 배열의 요소를 생성하는 함수, 매개변수는 3가지 currentValue = 현재 처리하고 있는 요소 index = 현재 처리하고 있는 요소 index값 array = 현..

컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 쓴다. {this.myComponent=ref}} />​ MyComponent 내부의 메서드, 멤버 변수에도 접근이 가능하다. import React, { Component } from "react"; class ScrollBox extends Component { //스크롤바를 가장 밑으로 내리는 메소드 scrollToBottom = () => { const { scrollHeight, clientHeight } = this.box; //const scrollHeight = this.box.scrollHeight; //const clientHeight = this.box.clientHeight; //와 같은 의미 this.box.scrollTo..