웹스톰으로 리액트 프로젝트를 생성해 예제를 만들어 실행 해보면 찍히면 안되는 콘솔 로그까지 마구잡히로 찍히고, 두번씩 찍히는 것을 경험한적이 있을것이다. 이유는 React.StrictMode 때문이다. 해당 모드가 존재하는 이유는 다음과 같다. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대한 경고 권장되지 않는 findDOMNode 사용에 대한 경고 예상치 못한 부작용 검사 레거시 context API 검사 StrictMode는 개발 환경에서만 실행이 된다. 그렇다면 운영환경으로 실행하는 방법이란 뭘까? webstorm의 터미널에서 yarn build 명령어를 입력 해보자. 위와같이 빌드가 완료되었다는 문구를 볼 수 있다. 이후 터미널에서 serve -s build 명령..

1. useMemo useMemo는 컴포넌트 내부에서 발생하는 불필요한 연산을 최적화할 수 있다. 아래와 같이 소스코드를 작성한다. 해당 컴포넌트를 실행하고, input에 입력을 해보자. 로그를 보면 button의 onClick이 발생하지 않아도 input값의 변경으로 인해 getAverage가 일어나게 된다. getAverage가 값들이 들어있는 list가 변경될 때 마다만 호출하려면 useMemo를 사용하면 된다. 위와같이 변경 하면 button의 onClick 이벤트로 인해 list가 수정될 때만 getAverage함수가 호출되는것을 볼 수 있다. 2. useCallback useCallback은 useMemo와 유사하다. 이전에 만든 Average 컴포넌트를 보면 컴포넌트가 리랜더링 될 때 마다 ..

1. useReducer useContext는 useState보다 다양한 상황에서 state를 업데이트를 할 때 사용한다. 기존 Counter를 reducer를 이용해 만들어보자. const [state, dispatch] = useReducer(reducer, { value: 0 }); state, dispate의 용도는 useState와 동일하다. 하지만 useReducer의 파라미터는 두개가 되는데, 첫 번째는 호출 시 실행하게되는 함수이고, 두 번째는 초기화 값이다. 아래 온클릭에서 dispatch안에 파라미터로 type: 'INCREMENT'를 넘겨줬고, 그럼 가전에 정의한 reducer라는 함수가 실행되고 해당 함수의 return이 state가 된다. 관리해야할 state가 2개 이상이거나 엘..

Hooks는 리액트 16.8 버전에 신규로 추가된 기능이다. 클래스형 컴포넌트에서만 가능했던 state 및 다양한 기능을 코드작성 없이 라이브러리로 제공한다. 리액트에서는 클래스형 컴포넌트가아닌 함수형 컴포넌트에 훅을 사용하는것을 권장한다. 훅의 간단한 규칙이 있다. 최상위 컴포넌트에서만 호출 : 반복문 혹은 중첩된 함수 안에서 호출을 하게되면 버그가 발생할 수 있어 최상위 한개에서만 호출하는것을 권장한다. 이 규칙을 따르면 컴포넌트가 랜더링되는 순서대로 훅이 호출되는것을 보장한다. 리액트 함수 내에서만 호출 : 소스코드를 명확하게 하기 위해 일반 자바스크립트에서는 호출하지 않는다. 1. useState useState는 가장 기본적인 훅이다. 함수형 컴포넌트에서 상태를 관리해야할 일이 있으면 useSt..

1. State 변경 가능한 값 우리가 아는 데이터에 해당. 데이터 변경 시 화면이 새로고침 됨 state는 우리가 일반적으로 알고있는 변수와 비슷하다. 다음 예제에서는 카드색상을 원하는색으로 바꾸는 실습을 진행하겠다. 아래와 같이 파일을 생성한다. Label, Squere컴포넌트를 사용하는 Card 컴포넌트를 만들고. 해당 컴포넌트의 div에 쓰일 Crad.css를 만든다. 그리고 만들어진 Card 컴포넌트를 App.js에서 사용을 하면 아래와 같은 결과를 얻을 수 있다. 기본 구조를 가지고 버튼을 통해 state값을 컨트롤해 색상을 동적으로 보여주는 예제를 만들어보자. 이전에 state는 function에서 가질 수 없었다고 했지만, 이후 hook의 useState를 통해 함수형 컴포넌트에서도 sta..

화면에 값을 불러오고 표현하기 위한 값을 처리하는 방식에 대해서도 알아보자. 1. Props 불변하는 값 부모 컴포넌트에서 자식컴포넌트로 전달 한번 만들어진 데이터는 변경되지 않는다. 상태값이 없는 컴포넌트는 stateless component라고 부른다. 이런 상태값이 없는 컴포넌트는 스스로 데이터가 존재하지 않고 props 전달받아 처리하게 된다. 이전에 Bootstrap 예제 페이지를 통해 데이터를 넘기는 실습을 해보자. 이전에 했던 App.js에서 Nav 컴포넌트를 호출하는 부분에서 navName이라는 이름을 사용해 전달 하자. 원래는 함수 옆 ()안에 아무것도 없었지만, 지금은 props를 추가해준것을 볼 수 있다. 이후 아래쪽에서 {props.navName}이라고 넘겨준 props를 호출해주면..