RealMenRoad

리액트가 이미 상태 관리를 할 수 있는데 왜 리덕스가 필요할까요? devlog-h.tistory.com, medium.com 리액트는 컴포넌트 기반으로 동작하며, 컴포넌트 내부에서 상태를 관리합니다. 하지만 컴포넌트간의 상태 공유는 불가능하며, 복잡한 구조에서는 상태 관리가 어려울 수 있습니다. 이런 문제를 해결하기 위해 등장한 것이 리덕스입니다. 리덕스는 Flux 패턴을 기반으로 동작합니다. Flux 패턴은 단방향 데이터 흐름을 가지는 아키텍처로, 액션(Action), 디스패처(Dispatcher), 스토어(Store), 뷰(View)로 구성됩니다. 이 패턴을 따르면 애플리케이션의 상태 관리와 데이터 흐름을 예측 가능하게 만들어줍니다. 리덕스를 사용하면 하나의 스토어를 통해 전역 상태를 관리할 수 있습..

함수형 컴포넌트와 Hooks를 사용하면 클래스형 컴포넌트보다 더 좋은 성능을 얻을 수 있나요? 함수형 컴포넌트와 Hooks를 사용하면 클래스형 컴포넌트보다 더 좋은 성능을 얻을 수 있는 경우가 있습니다. 이는 컴포넌트의 렌더링 최적화와 관련이 있습니다. 예를 들어, useMemo나 useCallback을 이용해 불필요한 렌더링을 방지할 수 있습니다. 또한 Hooks를 사용하면 더 짧은 코드로 같은 기능을 구현할 수 있기 때문에, 코드의 가독성과 유지보수성이 좋아질 수 있습니다. [0] 하지만 성능에 대해서는 클래스형 컴포넌트와 함수형 컴포넌트 간의 차이가 크지 않다는 연구 결과도 있습니다. [2] 이는 리액트의 내부 동작 메커니즘과 브라우저의 최적화 방식에 따라 달라질 수 있습니다. 따라서 성능 최적화를..

Ref dom에 직접 접근할 때 사용됨 일반 html에서는 dom요소에 이름을 달 때 id를 사용해 식별하고 접근하는데 react에서는 ref 방식으로 접근한다. id 사용을 권장하지 않는 이유 react에서 안에서 특수한 경우가 아니라면 id 사용을 권장하지 않음. 예를 들어 컴포넌트를 여러 번 사용한다고 html안에서는 id가 유일해야하는데 이런 상황에서는 중복 id를 가진 dom이 여러개 생기니 잘못된 사용입니다! ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않습니다. ref를 사용할 때는?? state로 해결할 수 없고 dom을 꼭 직접적으로 건드려야 할 때 아래와 같은 경우들 1. 특정 input에 포커스 2. 스크롤 박스 조작 3. 컨버스 요소에 그..

리액트는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고 최적의 유저 경험을 제공 할 수 있을까요?? 리액트에서는 초기랜더링을 다루는 랜더함수 render() 가 있다. 이 함수는 단순히 html을 반환하는 것이 아닌 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환한다. 랜더 함수가 실행되면 내부에있는 컴포넌트들도 재귀적으로 랜더링한다. 최상위 컴포넌트의 렌더링 작업이 이끝나면 지니고 있는 정보들을 html 마크업을 만들고 이를 우리가 정하는 실제 페이지의 dom요소 안에 주입합니다. 조화 과정 컴포넌트에서는 데이터 변화에 따라 뷰가 변형되는 것이 아닌 새로운 요소로 갈아 끼우는 것 이작업 또한 render() 함수가 한다. . . . . 컴포넌트는 데이터..

하나의 페이지나 컴포넌트 내에도 수많은 상태값이 존재한다. 만약 이 상태 하나하나가 바뀔 때마다 화면을 리렌더링 한다면 문제가 생길수도 있다. 때문에 리액트는 성능의 향상을 위해서 setState를 연속 호출하면 배치 처리하여 한 번에 렌더링하도록 하였다. 아무리 많은 setState가 연속적으로 사용되었어도 배치 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지하는 것이다. useState를 동기적으로 처리하는 방법? 함수를 전달하면된다.

리액트에서 state의 불변성을 유지해야 하는 이유는 다음과 같습니다. 불변성을 유지하면 성능이 향상됩니다. state를 업데이트할 때마다 새로운 객체를 생성하면 리액트는 이전 상태와 새로운 상태를 비교하여 변경된 부분을 찾아내야 합니다. 이 과정에서 객체가 변경되면 더 많은 연산이 필요하며, 이는 애플리케이션의 성능을 저하시킬 수 있습니다. 불변성을 유지하면 변경된 객체만 찾아내고, 나머지 부분은 이전 상태와 동일한 객체로 처리할 수 있으므로 성능이 향상됩니다. 불변성을 유지하면 디버깅이 용이합니다. 불변성을 유지하면 상태 변경을 추적하기 쉽습니다. 예를 들어, 객체를 직접 수정하는 경우 언제, 어떤 값이 변경되었는지 추적하기 어렵습니다. 하지만 불변성을 유지하면 변경된 값을 추적하기 쉬우므로 디버깅이..

변수란 값의 위치를 가리키는 상징적인 이름이다. 재 사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이 바로 변수이다. 변수에 값을 저장하는 것을 할당이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다. 변수의 이름을 짓는 것은 아이의 이름을 짓는 것처럼 신중해야한다. 식별자란 변수의 이름을 식별자라고 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다., 자바스크립트 엔진은 변수 선언을 총 2단계로 나눔 선언단계 변수 이름을 등록해서 자바스크립트 엔진에 변수를 알린다 초기화 단계 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다. var 키워드를 사용한 변수선언은 선언단계와 초기화 단계가 동시에 진행된다.

리액트는 오로지 뷰만을 위한 라이브러리 초기 렌더링시에 render()함수가 실행됨 render함수는 가장 처음 어떻게 보일지를 정하는 렌더링에 사용되는 함수이다. 이 함수는 컴포넌트가 어떻게 생겼는지를 정의하는 역할을 합니다. html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환단다. 컴포넌트안에 자식 컴포넌트가 있다면 자식 컴포넌트는 재귀적으로 렌더링된다. 재귀적이다 라는 말은 재귀함수처럼 자기자신을 호출하면 가장 마지막으로 호출한 함수부터 실행되잖아요. 그렇게 이해하시면될듯해요 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 html 마크업을 하고 이를 우리가 정하는 실제 페이지의 DOM요소안에 주입된다. 초기 랜더링 1.렌더링 ..

useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다. function Example() { // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다. const [count, setCount] = useState(0); React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공합니다. count 변수의 값을 갱신하려면 setCount를 호출하면 됩니다. 용자가 버튼 클릭을 하면 setCount 함수를 호출하여 state 변수를 갱신합니다. React는 새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더..

5/7 토요일 1. TCP UDP 차이 TCP 연결형 서비스로 신뢰성이 높지만 속도가 비교적 빠르지 않습니다. UDP는 비연결형 서비스로 신뢰성이 낮지만 수신 여부를 확인하지 않아 속도가 비교적 빠르다 TCP는 신뢰성에 의존도 높은 파일전송 등에 쓰이고 UDP는 스트리밍 서비스에 주로 활용된다 . 신뢰성 수신여부 데이터 수신여부!! 연결형 비연결형 내가 받을 준비가 되었는지 : 내가 데이터를 받을 준비가 되어있는지 3 handshaking 연결을 설정 1. 클라이언트 준비됐냐 2.서버 준비 됨 3. 클라이언트 알겠어 연결하자 4 handshaking 종료를 설정 udp 내가 받든 안 받든 보낸다. 2. GET POST 방식의 차이 GET은 데이터를 조회하기 위해 사용되는 방식으로 데이터를 헤더에 추가하..