React

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다.논리 && 연산자로 if를 인라인으로 표현하기 JavaScript에서 true && expression은 항상

React에서 배열을 엘리먼트 리스트로 만드는 방식배열의 숫자를 순서없는 리스트 형식으로 보여주는데 key를 넣어야 한다는 경고 표시를 볼 수 있는데 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다.key 어트리뷰트 적용key는 엘리먼트에 안정적인

살면서 변할 수 있는 값컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값함수 컴포넌트에서는 만들 수 없다. 클래스 컴포넌트에서만 사용할 수 있다.클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 합니다.state가 변경되면, 컴포넌트는 리렌

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는

getAverage함수를 통해 평균값을 구하고 있다. 하지만 인풋 내용이 바뀔 때마다 리렌더링 되면서 다시 계산하고 있는데 이는 낭비가 된다. 그래서 useMemo를 사용하여 list가 변할 때만 계산하도록 하였다.(useMemo(() => getAverage(list

특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 커서를 포커스 해줘야되는지 등 다양한 상황으로 DOM을 직접 선택해야 하는 상황이 있다. 이때, 리액트에서는 useRef 함수를 사용한다.원하는 input에 ref를 추가해주고

배열의 map을 이용하여 모든 원소가 렌더되도록 가능하다. 하지만 이때 key라는 props를 설정해야 하고 각 원소들마다 가지고 있는 고유값으로 key값을 설정한다. 만약 없을 때에는 배열의 index로 key값을 설정하지만 권장하지 않는다.key값을 설정하는 이유는

불변성을 지켜 어떤 것이 변했는지 리액트에서 알기 위해서 사용한다.state가 변하기 전의 값과 변한 후의 값을 비교하여 리액트 최적화를 할 수 있다.의도하지 않은 특정 객체가 변경되면 참조하고 있던 객체에서도 변경이 일어난다. 즉, side-effect가 발생할 확률

Effect Hook React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 “side effects”(또는 짧게 “effects”)라고 합니다. 왜냐하면 이것은 다른 컴포넌트에

React.memo를 사용하여 리렌더링 방지한다. 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정가능하다.같은 props로 렌더링이 자주 일어나는 컴포넌트가 있을 때 사용한다. 여러 props 중 한개의 props로 렌더링이 자주 일어났을 때 Reac

함수형 컴포넌트에서 상태관리 시 useState를 사용하는 것 말고 다른 방법으로 useReducer를 사용하여 state를 관리할 수 있다. useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있고 상태 업데이트 로직을 컴포넌트 바

리액트에서 변수가 아니라 state를 사용하는 이유 리액트에서 변수를 사용하여 변경된 값을 렌더할 수 없기 때문에 state를 사용한다. 리액트에서 렌더하는 방법 render 함수를 통해 렌더링한다. render 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다

componentDidMountcomponentWillUnmountcomponentDidUpdate

함수형 컴포넌트에서 useState나 useEffect hook을 여러개 사용할 수 있다. 그렇다면 특정 state가 어떤 useState 호출에 해당하는지 알 수 있는이유는 hook이 호출되는 순서에 의존하기 때문이다다음과 같은 함수형 컴포넌트가 있을 때 hook 호