코딩을 잘하고 싶은 코린이 동토니

회사에 들어온 후 React-Query에 대한 도입을 회사 내부에서 고민을 하고있을때 신규 프로젝트 백오피스를 제작하며 React-Query를 가장 먼저 도입해서 사용을 해보았다. 해당 백오피스를 처음 제작할때 사용했던건 Next.js, 전역상태관리를 위한 recoil, emotion styled-component 정도만 정해두고 사용하고 있었다. 하지만 데이터 패치 관련하여 recoil에서 커버가 불가능한 부분이 점점 생겨나기 시작했고, 이에대한 해결방안을 모색하던중 많은 기업에서 react-query를 도입하고 있고 왜 react-query를 도입했는지 이유 또한 충분히 납득이 갔기에 나도 한번 채택하여 사용해보기로 하였다. 우선 react-query를 사용하기전 기존의 방식은 아래와 같은 순서로 점..

hooks는 기존 함수형 컴포넌트에서 할수 없었던 다양한 작업을 할 수 있게 도와준다. 1.useState = 상태 관리에 사용 *import* React, { useState } *from* "react"; const Counter = () => { const [number, setNumber] = useState(0); *return* ( 현재 카운터 값은 {number}입니다.{" "} setNumber(number + 1)}>+1 setNumber(number - 1)}>-1 ); }; *export* *default* Counter; useState 파라미터에는 상태의 기본값을 정해준다 위의 경우 0 이 함수가 호출 되면 배열을 반환을 해주고 배열의 첫번째 원소는 상태 값 두번째 원소는 상태를 ..

state란? state는 변경될 수 있는 데이터를 말한다. (Hooks가 사용되기 이전에는 state는 함수형 컴포넌트에서 사용이 불가능 했지만 Hooks가 나온 이후로는 함수형 class형 관계없이 사용이 가능하다.) 즉 state는 컴포넌트 내에서 데이터를 유동적으로 관리해야 할 때 사용한다. Props? 이전에 공부한 props(properties)는 컴포넌트간에 전송이 가능한 데이터였지만 부모 컴포넌트에서 전달되는 값이였기 때문에 한 컴포넌트안에서 데이터 변경을 할수가 없다. state 접근 state의 경우 직접적으로 state의 값을 변경시켜주려하면 안된다. class형 컴포넌트에서 setState()함수를 통해 state의 값을 변경시켜주어야 한다. state 예시 counter.js im..

Props JS로 웹개발을 진행해보신분들이라면 수도없이 많이 접했을 단어일 것입니다. 기본적으로 Props는 컴포넌트의 속성(attribute)을 설정할 때 사용하는 요소입니다. 즉 컴포넌트에서 다른 컴포넌트로 값을 전해주는 요소입니다. 중요한건 Props는 모든 컴포넌트와 컴포넌트 사이에서 값을 전달할 수 있는것이 아니라 부모 컴포넌트로부터 값을 불러와 자식 컴포넌트가 사용을 할 수 있게 됩니다. 밑에 예제를 한번 보게되면 import React, { Component } from "react"; import Mycomponent from "./Component/MyComponent"; class App extends Component { render() { return ( ); } } export d..

React.js 에서 컴포넌트를 구성하는 방법을 이야기해보라고 하면 2가지 Class형 컴포넌트와 함수형 컴포넌트를 이야기 할 수 있다. 우선 Class형 컴포넌트부터 살펴보자 import React, { Component } from "react"; class ClassComponent extends Component { render() { return ( 클래스형 컴포넌트 ); } } export default ClassComponent; 클래스를 선언후 extends로 Component 클래스를 상속받아 사용한다. Class형 컴포넌트의 특징을 살펴보면 1. state 및 LifeCycle 사용이 가능하다 2. 임의의 Method를 정의 할 수 있다. 3. render 함수로 jsx를 반환한다. 이..