predictable state container, 프론트 엔드 개발에서 가장 인기 있는 라이브러리 중 하나로 state를 관리하기 위한 패턴인 상태 컨테이너이며 클라이언트, 서버 및 기본 환경에서 일관되게 동작하고 테스트하기 쉬운 자바 스크립트로 앱을 빌드하는 데 도움이 되도록 설계되어 있습니다. Action, 이벤트로서 Store로 데이터 (API 호출 또는 양식 제출 등)를 보냅니다. 앱 어디에서나 작업을 호출 하는 것이 쉽고 Dispatch method를 사용합니다. Reducer, 현재 state를 가져와서 작업을 수행하고 새로운 state로 반환합니다. callback(reducer)을 허용하고 여러 형태의 값을 얻을 수 있는 array reduce method를 기반으로 작동합니다. 현재 s..

프로젝트를 하다보니 사용자의 편의성에 맞추기 위해서는 반응형 웹을 사용하는 것은 필연적이라 생각이 들었는데요. 그래서 모듈을 찾다보니 여러가지가 나오지만 그 중에서도 react-responsive와 react-device-detect를 비교를 하면 화면의 크기와 기기 종류로 판단하여 사용한다. react-responsive 아래와 같이 useMediaQuery를 사용하여 크기에 따라서 어떻게 반응할지 혹은 가로/세로모드에 따라서 어떻게 반응해야 되는지 Hooks을 통해서 변화를 줄 수 있다. import React from 'react'; import {useMediaQuery} from 'react-responsive'; export default function TestMap() { const isD..

RTL 테스팅 라이브러리는 Behavior Driven Test(행위 주도 테스트) 방법론 (Implementation Driven Test(구현 주도 테스트)의 단점을 보완하기 위한 방법론)이 대두 되면서 주목받기 시작한 테스팅 라이브러리 어떻게 작동 되는지 대해서 초점을 두어 어떠한 태그와 어떠한 클래스가 사용되었는지 테스트를 하였던 것을 Behavior Driven Test에서는 어떤 이벤트를 발생시켰을 때, 그에 따라 화면에 변화가 어떻게 일어나는지를 테스트 한다. https://www.daleseo.com/react-testing-library/ React Testing Library 사용법 Engineering Blog by Dale Seo www.daleseo.com

useState 이전 게시글로 대체 useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정 위와 같은 코드를 작성하게 되면, 기존에 명시된 info에 관련 정보를 출력 마운트만 실행하고자 할 때, 두 번째 파라미터는 비어있는 배열 useEffect(()=>{console.log("마운트!")},[]); 특정 값이 업데이트될 때만 실행 useEffect(()=>{console.log(name);},[name]); useReducer useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수 새로운 상태를 만들 때, 불..

Ref render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양 Ref 생성 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착됩니다. 보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref 접근 가능 위와 같이 선언? 후에 사용된 함수내에서 this.box.scrollTop나 this.inputName.focus의 값에 변화를 줄 수 있다.

라이프사이클 메서드의 종류는 총 아홉 가지 마운트, 업데이트, 언마운트 카테고리로 나눌 수 있다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트 아래의 네 가지 경우에 발생 props가 바뀔때 state가 바뀔때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 언마운트 마운트의 반대, 컴포넌트를 DOM에서 제거 라이프사이클 메서드 render() 함수 컴포넌트 모양새를 정의하며, 유일한 필수 메서드 this.props와 this.state 접근 가능, 리액트 요소를 반환 요소의 경우는 같은 태그나 따로 선언한 컴포넌트, null값이나 false값 반환 constructor 메서드 생성자 메서드, 초기 state를 정할 수 있다. getDerive..

input 요소를 이용해서 console 및 alert 해보려 한다. 우선 함수의 형태의 값을 전달을 위한 메서드 생성 class EventPractice extends Component { state = { message: '' } constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } handleChange(e) { this.setState({ message: e.target.value }); console.log("changing : "+this.state.message); } handleClick() { conso..

map 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수 함수는 원본 자료형을 변형시키지 않아서 새로운 변수에 담아서 사용 function App() { let [글제목, 글제목변경] = useState(['논산', '강남', '동대문']); return ( { 글제목.map((a)=>{ return ( {a} ) ) } ) } map() 함수 기본 사용 const number = [1, 2, 4, 6, 20, 100]; const result = number.map((newNumber) => newNumber * newNumber); console.log(result); map() 함수를 통해서 각 값 * 값을 return하여 console..