주니어개발자성공하자

👉 장점 로직을 재사용할수 있다 관리가 용이하다 함수안에 다른 함수를 호출하여 새로운 hook을 만들수있다. 기존 class component는 여러단계의 상속으로 이루어져 복잡성과 오류가능성을 증가시켰다. function component는 클래스 컴포넌트가 가지고있는 기능들을 모두 사용할수있고 복잡성과 재사용성의 단점들을 해결했다

👉 의미 리액트의 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기위해 필요한 과정 👉 단점 예를들어 우리가 app.js에서 데이터를 하위컴포넌트까지 쭉 전달하면 데이터가 변경되었을때 하나하나 고쳐야하는 불편함이 발생 👉 해결방안 전역상태관리 라이브러리(redux,mobx...)를 사용하여 데이터가 필요한 컴포넌트에서 직접 데이터를 불러와 사용

👉 이유 state는 불변성을 유지해야 합니다. 컴포넌트는 setState를 비교하여 업데이트가 필요한 경우에만 render함수를 호출하는데 state를 직접 변경하게 되면 render함수를 호출하지 않아 상태가 변경이 되었다 하더라도 렌더링이 일어나지 않을 수 있습니다.

👉 재조정 (Reconciliation)이란? React는 실제 DOM을 직접 제어하지 않고 중간에 virtual DOM을 두어 virtual DOM이 변경이 되었을때 실제 DOM을 갱신하도록 설계되어있습니다. 👉 virtual DOM을 갱신하는 방법 setState() 메소드를 호출 전역 상태 관리 라이브러리 ( redux,mobx ... ) store 데이터가 변경 위 두가지의 행동이 일어났을때 최상위 컴포넌트의 render() 함수를 호출해서 렌더링이 일어납니다

👉 개념 React는 UI를 구축하기 위한 프론트엔드 라이브러리입니다. 주로 SPA를 작성하는데 사용합니다 👉 장점 virtual DOM을 사용하여 어플리케이션의 성능을 향상 CSR이 가능 다른 프레임워크와도 같이 사용이 가능 컴포넌트의 가독성을 높이고 유지보수가 쉽습니다 👉 컴포넌트란? 레고블럭처럼 기능들을 작은단위로 만들어 그것을 조립하는 것처럼 개발하는 방법 캡슐화, 재사용성, 확장성, 결합성과 같은 이점이 있다.

리덕스란? Javascript 상태관리 라이브러리이다. 리덕스의 기본 개념 : 세가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 호출한다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다 2. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다 리덕스에서도 액션이라는 객체를 통해서만 상태 변경이 가능하다 3. Changes are made with pure functions 변경은 순수함수로만 가능하다 리듀서와 연관되는 개념이다. Store - Action - Reducer Store 란? 상태과 관리되는 오직 하나의 공간이다. 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 필요한 상태를 담는다 컴포..

정적인 페이지는 웹서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다. 단순히 기업을 소개하는 페이지라면, 유저와 상호작용은 중요하지 않습니다. 이런 경우 HTML과 CSS의 구성만으로도 충분히 웹 페이지를 작성할 수 있습니다. 반면, 동적인 페이지는 유저의 행동 흐름에 따라 웹페이지의 구성을 달리 해주어야 하는 페이지입니다. 즉 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트가 받게 됩니다. 리액트의 특징 Component 단위 작성 컴포넌트는 UI를 구성하는 개별적인 뷰 단위로 하나의 블록으로 만들어 블록들을 조립하여 하나의 완성품으로 만드는 것과 같습니다. 여러 곳의 같은 디자인의 버튼이 필요하다면 하나의 버튼 컴포넌트를 만들어 여러 곳에서 가져다 사..

전 게시물인 useMemo와 비슷한 Hook입니다. useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 재사용 하고 싶을 때 사용합니다. 메모이제이션 const memoizedCallback = useCallback(함수, 배열); 첫번째 인자는 함수를 두번째 인자는 넘어온 배열의 값이 변경 될 때까지 저장하여 재사용 할 수 있다. 예를 들어 컴포넌트 함수안에 함수가 선언되어 있다면 이 함수는 컴포넌트가 랜더링 될 때 마다 새로운 함수가 생성된다. const add = () => x + y; 하지만 useCallback을 사용하면 해당 컴포넌트가 랜더링 되더라도 의존 배열이 바뀌지 않는한 기존 함수를 계속 반환합니다. x와 y 값이 바뀌면 새로운 함수가 생성되어..

성능 최적화를 하는 방법은 여러개가 있다 그 중에서 useMemo라는 Hook을 사용하여 재사용하는 방법을 알아보자. Memoization 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다 적절히 사용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다. 아래 컴포넌트는 인자로 넘어온 x와 y값을 compute함수에 넘겨서 z값을 구한 다음 z를 출력해준다. function MyComponent({ x, y }) { const z = compute(x, y); return {z}; } 만약에, compute 함수가 매우 복잡한 연산을 수행하기 때문에 결과값을 리턴하는데 시간이 오래걸리게 된다면 어떻게..

useEffect라는 Hook을 사용하여 컴포넌트가 마운트되거나 언마운트 됐을때, 또 업데이트가 되었을때 특정 작업을 처리하는 방법에 대해 알아보자 마운트 / 언마운트 useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); useEffect를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 deps를 넣는다. 만약 deps를 위와같이 비워두게 되면 처음 마운트 됐을때만 호출된다. useEffect에서는 함수를 반환 할 수 있는데 이름 cleanup 함수라고 부른다. 후처리라고 생각하면 편하다. deps 에 특정 값 넣기 useEffect(() => { cons..