25G.story

프론트 엔드 입장에서 렌더링은 html과 css로 웹페이지에 UI를 그리는 과정을 의미한다. 리엑트에서도 렌더링이라는 과정이 존재한다. 리엑트의 렌더링- 브라우저가 렌더링에 필요한 DOM트리를 만드는 과정을 의미한다. - 리엑트 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에게 던질지 계산하는 일련의 과정을 뜻함 렌더링 발생 타이밍1. 최초 렌더링 : 사용자가 처음 애플리케이션에 진입시2. 리렌더링: 최초렌더링 이후 발생하는 모든 렌더링클래스형 컴포넌트의 setSteate가 실행될떼클래스형 컴포넌트의  forceUpdate가 실행될때함수형 컴포넌트의 useState()의 setter가 실행될..

MAC,IP,Port 번호가 식별하는것 위사진은 osi 7계층 사진입니다. 전송 계층에 Port 번호 Port번호가 재밌는 부분이 업무에 따라 달라진다고 합니다. 소프트웨어개발자는 프로세스 식별자라고 생각하고 네트워크 업무를 보시는분은 서비스라고 하고 실제로 통신공사를 하는 분은 인터페이스라고 말한다고 합니다. 네트워크 계층에 IP주소 v4,v6 물리계층 MAC 어드레스 주소 NIC(네트워크 인터페이스 카드) 모든 렌카드는 맥어드레스가 있습니다. 네트워크 인터페이스카드 NIC은 호스트를 식별하지는 않는다. NIC하나에 여러게의 IP를 바인딩 해서 사용할 수 있다. MAC주소는 하드웨어 주소라고도 한다. MAC주소는 변경할 수 있다. MAC IP Port는 각 각의 계층에 위치해 있습니다.

React Memo? React의 렌더링 성능을 최적화하기 위한 고차 컴포넌트(HOC, Higher-Order Component)이다. 원리를 이해하려면 React의 렌더링 과정을 먼저 이해해야 한다. React 렌더링의 기본 React에서 상태나 props가 변경될 때마다 해당 컴포넌트는 다시 렌더링된다. 때로는 실제로 변경되지 않은 props나 상태에 대해서도 불필요하게 다시 렌더링되는 경우가 있을 수 있다. 이러한 불필요한 렌더링은 애플리케이션의 성능을 저하시킬 수 있다. React.memo의 원리 React.memo는 컴포넌트에 대한 메모이제이션(memoization)을 제공는데 메모이제이션이란 주어진 입력에 대한 출력을 기억해 놓았다가, 동일한 입력이 다시 주어질 때 기존의 출력을 다시 사용하는..

React 불변성 불변성이란 사전적 의미로 값이나 상태를 변경할 수 없는값 js에서 원시 타입은 불변성을 가지고 있고 참조 타입은 그렇지 않다 원시타입 : boolean, string, number, ull, undefined, Symbol 참조타입 : Object, Array 원시타입 : 고정된크기로 call Stack 메모리에 저장, 실제 데이터가 변수에 할당 참조타입 : 데이터 크기가 정해지지 않고 CallStack 메모리에 저장, 데이터 값이 heap에 저장되며 변수에 heap 메모리의 주소 값이 할당. - 배열에 대한 요소를 추가하거나 객체 속성의 값을 변경할 때 call Stack의 참조 id는 동일하게 유지되고 heap 메모리에서만 변경됩니다. 이렇게 불변성이 유지되지 않기 때문에 리액트를 ..

Props 1. Properties의 줄임말 2. Props는 상속하는 부모 컴포넌트로 부터 자녀 컴포넌트에 데이터 등을 전달하는 방법 3. Props는 읽기 전용으로 자녀 컴포넌트 입장에서는 변하지 않는다. 변하게 하고자 하면 부모컴포넌트에서 state를 변경시켜 줘야한다. ex) A 부모 컴포넌트 state = {a : "a"} B 자식 컨포넌트 a state 필요 this.props.aprops State 1. 부모 컴포넌트에서 자녀컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달하려면 State를 사용하면 된다. 2. State는 변경 가능 3. State이 변하면 re-render된다. ex) A 컴포넌트 state = {a : "a"} this.state.a

React 함수 컴포넌트에서 useState와 useEffect 훅을 사용한 간단한 예시입니다. import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); return ( Count: {count} setCount(count + 1)}>Increase Count ); } export default Counter; 이 예시에서 useState 훅은 count라는 상태 변수와 그 값을 변경할 수 있는 setCount 함수를 제공합니다. useEffec..

React Hooks? class없이 state를 사용할 수 있는 새로운 기능입니다. React는 주로 Class Component를 사용하고 React Hooks는 Functional Component를 사용하기 때문에 먼저 그 부분 부분부터 비교를 해보자 Class Component Functional Component 더 많은 기능 제공 더 적은 기능 제공 긴 코드 짧은 코드 복잡한 코드 심플한 코드 더딘 성능 빠른 성능 리엑트 생명 주기 위와같은 생명주기를 함수형 컴포넌트에서는 사용을 하지 못했기 때문에 함수형 컴포는트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔습니다. 이 부분은 React 16.8 hooks 업데이트로 변경됐습니다. 해당 업데이트 이후에 함수형 컴포넌트에서도 생명주기를 사..

styled component : 서브 파트 라이브러리 (외부 라이브러리) react에서 주는 게 아니라 외부에서 가져오는 라이브러리이다 https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers..

nav바는 컴포넌트로 두면 편하기 때문에 nav바 컴포넌트를 만들어볼 것이다 구조화 할당 props안에 있는 post오브젝트를 선언해놓는 것이다. 그러면 {props.post.id}를 써줘야 하는데 위처럼 줄여줄 수 있다. 게시글 추가하기 컨포넌트는 디자인만 가지고 있는 것이지 배치까지 가지고 있으면 제사 용성이 떨어진다. 버튼을 컴포넌트화 했다. 이렇게 컨포넌트화를 잘하면 이 페이지가 아닌 다른 페이지에서도 이 컴포넌트를 사용할 수 있는 것이다. 컨포넌트를 동적으로 활용하는 방법 스타일 컴포넌트가 함수 안에 있다 그 이유는 이 컴포넌트를 동적으로 할당하는 경우에만 이렇게 함수 안에 스타일 컴포넌트를 배치하면 된다. "..."연산자 (전개 연산자) 꼭 공부할 것 데이터를 추가할 때 사용한다. 배열을 버리..

위와 삭제 버튼을 눌렀을 때 알고리즘은 3번을 삭제할 때 밑에 있는 4번을 3번 자리로 이동시켜주는 것이다. 이렇게 하면 자료가 10000개가 있다고 가정하면 99997개의 자료를 다시 한 칸씩 당겨야 한다. 이건 별로 좋은 알고리즘이 아니다. 컴퓨터에서 io다음으로 지연을 시키는 요소가 렌더링이다. 위 알고리즘처럼 하면 그림을 이동시켜야하는데 이게 렌더링 작업 중에 하나다. 그래서 리 엑트에서는 삭제할 때는 각 엘레맨트에 데이터를 이동시킨다. 위 경고창이 나온 이유도 item마다 key가 있어야 효율적으로 엘레멘트를 찾아서 작업을 해줄 수 있기 때문에 ket값을 넣어주라는 말이다. 삭제 버튼 구현 삭제버튼을 눌렀을 때 상태 변경을 하려면 PostItem에서 상태를 들고 있어야 하는데 App에서 들고 있..