NYchicken's blog ;

컴포넌트 최적화에 사용되는 hook은 useMemo와 useCallback이 있다. 이번엔 useMemo 를 다룬다! useMemo 란? useMemo의 Memo 는 memoization 을 의미한다. 동일한 값을 리턴하는 함수를 반복적으로 호출해야할 때, 맨 처음으로 값을 계산할 때 그 값을 메모리에 저장해 필요할 때 마다 메모리에서 꺼내 쓰는 기법이다. 혹은 자주 쓰는 값을 맨 처음 계산할 때 캐시메모리에 저장해 재사용하는 것이다. 렌더링이란 Component 함수가 호출되는 것이다. 이렇게 함수가 호출될 때 마다 내부에서는 모든 변수가 초기화 되는 상황이 발생한다. 컴포넌트가 반복적으로 호출되어도 초기화 되지 않게끔 우리는 useMemo 를 사용할 수 있다. useMemo 동작 순서 1. Compo..

useContext 를 사용해야하는 이유 React 컴포넌트는 부모에서 자식으로 props 를 통해 데이터를 전달해야한다. 이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면 단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다. 중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고, 해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다. 이런 문제를 해결하기 위해 우리는 useContext 를 사용한다. 전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트 까지 데이터 전달을 손쉽게 할 수 있다. ex) 유저 정보, 테마, 언어, ... 하지만 Context 를 사용하게 된다면 컴포넌트의 재사용성이 떨어지므로 잘 생각..

useRef 사용하기 const ref = useRef(value); ref 의 초기값은 useRef에 선언하며, ref 는 {current: value} 의 형태로 저장된다. 해당 객체는 수정이 가능하기 때문에 언제든 바꿔줄 수 있다! 그리고 컴포넌트가 unmount 되기 전까지는 값을 유지한다. useRef는 변경 가능한 객체를 반환한다. 반환된 객체는 useRef의 인자를 current 라는 속성에 저장한다. 반환 객체는 컴포넌트가 unmount 될 때 까지 지속된다. useRef 는 Ref 가 변해도 re-render 되지 않으며, re-render 되어도 Ref는 유지된다. 값이 아무리 바뀐다고 해도 렌더링이 일어나지 않기 때문에 성능적인 부분에서 유리하다. 사용 예시 1. 저장공간 state ..

Hook은 React 16.8 버전부터 새로운 요소로 추가되었다. 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 된것! useEffect 훅이란? 리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있게 하는 Hook이다. useEffect를 사용하게 되면 함수형 컴포넌트에서 부가기능(side effect) 를 사용할 수 있게 된다. 이때의 특정 작업(side effect)란 렌더링 된 이후에 비동기로 처리되어야하는 부수적인 효과들을 의미한다. useEffect 안에 적는 코드들은 - 복잡한 알고리즘 연산을 해야하는 경우 - 서버와 통신해 데이터를 가져오는 경우 - 타이머를 장착해야하는 경우 - ... 이제 함수형 컴포넌트에서도 생명 주기 메..

컴포넌트에 다른 컴포넌트 담기 props children 사용해 컴포넌트 합성 (1) function BigComponent() { return ( 합성을 위한 부모 컴포넌트 입니다 JSX를 중첩해 임의의 자식을 전달 할 수 있습니다! ); } function SmallComponent(props) { return ( {props.children} 자식 컴포넌트입니다 ); } props 의 children 을 사용하게 되면 자식 엘리먼트를 그대로 출력할 수 있다. 이렇게 다른 컴포넌트에서 JSX를 중첩시켜 임의의 자식을 전달할 수 있게 되는 것이다. props children 사용해 컴포넌트 합성 (2) function SplitSection() { return ; } function SideSectio..

리액트는 기본적으로 단방향 데이터 흐름을 가진다. 그렇기 때문에 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터로만 형태, 타입을 확인할 수 있다. 해당 데이터가 state로 전달받은 것인지 혹은하드 코딩으로 입력된 데이터인지는 확인이 불가능하다. 상태(state) 끌어올리기란? 상위 컴포넌트의 상태 변경 함수 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 필요가 있다. 이땐 가장 가까운 공통 조상(컴포넌트)에서 state를 끌어올리는 것을 권장한다. 간단한 예제 참고! // 상위 컴포넌트 function LiftingState() { let [todo, setTodo] = useState([]); cons..

여러 컴포넌트 렌더링하는 가장 간단한 방법! function ListComponent(){ const numbers = [1, 2, 3, 4, 5]; const items = numbers.map((number) => { {number} }); return ( {item} ) } 하지만 이렇게만 실행한다면 에러가 발생한다. "key" 는 리스트 엘리먼트를 만들 때 포함해야하는 특수 문자 어트리뷰트이다. 그렇기 때문에 map() 안에서 리스트의 각 항목에 key 값을 할당해 문제를 해결할 수 있다. 짠- function ListComponent(){ const numbers = [1, 2, 3, 4, 5]; const items = numbers.map((number) => { // 각 li 에 key 를..

조건부 렌더링이란? 쉽게 말하자만 원하는 조건에 따라 다른 결과를 렌더링 하는것이다. 이를 위해 JS 연산자 if 나 조건부 연산자를 사용해 현재 상태에 맞는 UI 를 출력한다. 이렇게 두가지의 컴포넌트가 있다고 가정했을 때 function HelloApple(){ return Hello, Apple! } function HelloBanana(){ return Hello, Banana! } 현재 과일에 맞는 컴포넌트를 띄우는 Fruit 컴포넌트이다. fucntion Fruit (props){ const currentFruit = props.fruitName; if(currentFruit === 'Apple') return else return } 엘리먼트 변수 사용하기 변수를 사용해 출력의 다른 부분은 ..

이벤트란? 웹 페이지에서 마우스를 클릭하거나 특정 요소에 포커스가 이동 되었거나 키를 입력했을 때 등 '어떠한 사건을 발생 시키는 것' 을 의미한다. 1. 마우스 이벤트 - click - dbclick(double click) - mouseover, mouseoust - mousedown, mouseup 2. 키 이벤트 - keydown, keyup - keypress 3. 폼 이벤트 - focus - submit 등등 그 이상 참고는 https://ko.javascript.info/introduction-browser-events 여길 하시라! 여기 문서 너무 깔끔하고 보기 좋아서 강추... 🤓 이벤트 핸들러란? 사용자가 이벤트를 발생시켰을 때, 이에 대응하는 이벤트를 발생시키기 위한 함수이다. 이러한..