react

리액트에서 컴포넌트를 다루는 중요한 개념인 컴포넌트의 생명주기.리액트를 처음 공부할 때 배웠던 라이프 사이클을 다시 한번 정리함으로써 개념을 정확히 익혀보려고 한다.리액트는 컴포넌트 기반의 view를 중심으로 한 라이브러리이다. 각각의 컴포넌트에는 라이프 사이클 즉,

위의 코드는 현재 버튼의 값을 보여주는 Number와 4개의 버튼으로 이루어져 있다.기본 값은 1이고, 버튼을 누르면 버튼의 숫자만큼 커지거나 작아지는 방식이다.multipleBy2AndAddBy1 함수를 보자.그리고 결과 화면을 보자.만약, setState가 동기적으

이번 포스팅에서는 리액트에서 input 태그가 여러 개일 때 상태를 관리하는 방법에 대하여 알아보려고 한다.input이 여러 개가 됐을 때에는, 단순히 useState와 onChange를 여러 번 사용해서 구현할 수도 있다. 하지만 그렇게 좋은 방법은 아니다.만약 in

리액트는 SPA(single page application) 즉, 페이지가 한개인 어플리케이션 방식의 라이브러리로 프로젝트에 html의 파일이 1개이다.그래서 페이지 전환 기능을 구현하기 위해서는 외부 라이브러리에 의존해야 하는데 이때 사용하는 방법이 Routing이다

지난 포스팅에서는 react-router의 설치와 구성에 대하여 알아보았다.이번 포스팅에서는 중첩 라우팅에 대하여 알아보려고 한다.쉽게 말하면 서브 페이지라고 할 수 있다.예를 들어서, 지난 포스팅에서 만든 Tech 페이지에서 어떤 카테고리를 클릭하면 해당 페이지를 보

리액트에서 component가 데이터를 다루는 방법은 props, state, 그리고 context가 있다.이번 포스팅에서는 context에 대하여 알아보려고 한다.리액트에서는 props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주게 된다.위의 그림을

리액트를 공부하다보면 CSR과 SSR이라는 용어들을 접하게 된다.이번 포스팅에서는 CSR과 SSR에 대해서 알아보려고 한다.CSR과 SSR은 브라우저가 렌더하는 방식들을 의미하는 단어들이다.렌더링이 클라이언트 쪽에서 일어난다.기본적인 뼈대와 javascript 파일을

호환성 및 단순함을 이유로 외부의 글로벌 상태 관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을사용하는 것이 가장 좋다.이번 포스팅에서는 React의 Recoil에 대하여 알아보려고 한다.페이스북에서 개발한 React를 위한 상태 관리 라이브러리이다.Re