최적화 (Optimization)웹 서비스 단에서 최적화할 수 있는 사항들은 간단히 아래 요소들이 있다.서버의 응답 속도 개선 (Backend 측)이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선 (Frontend 측)불필요한 네트워크 요청 줄이기 (Frontend 측) React APP 최적화이번 글에서는 React 웹 프론트 단에서 성능을 최적화할 수 있는 방법에 대해 알아보고자 한다. 먼저, 리액트에서 컴포넌트가 랜더링 되는 상황에 대해 알고 있어야 한다.컴포넌트 내 Staet 변경컴포넌트 내 Props 변경부모 컴포넌트 변경 시 자식 컴포넌트도 재랜더링됨 위 랜더링되는 상황을 인지하면서, 불필요한 로직(함수 재생성, 랜더링)을 줄일 수 있는 방법은 아래와 같다.컴포넌트 내부의 불필요한 연산 방..
React Context리액트에서 Context란,컴포넌트 간의 데이터를 전달하는 방법 중 하나이다.기존 Props로 전달하는 방식의 단점을 해결할 수 있다. Props 전달 방식의 단점Props는 부모 -> 자식 컴포넌트로만 데이터를 전달할 수 있다.더 자세히 말하면, 바로 밑에 있는 자식 컴포넌트로만 props를 전달할 수 있다.App -> ChildB로 전달하기 위해서는 단계별로 Props를 전달해야 한다. 이러한 불편한 점을 Context를 사용하여 바로 Props를 전달할 수 있다. createContextTodoContext라는 React Context를 만들어, 객체, 함수 등을 전달할 수 있다.// 부모 컴포넌트에 있으면, 재랜더링 될 때마다 생성됨 -> 외부에서 관리하기export con..
