기로그 기로그

유데미 강좌를 보고 공부한 내용을 정리해보았습니다. 여기서는 context를 사용하는 이유와 간단한 사용법을 정리하였습니다. 리렌더링과 관련된 최적화와 Redux의 차이는 따로 정리 컨텍스트를 사용하는 이유 컴포넌트 간 데이터를 전달하려면 props를 이용한다. 리액트는 단방향 데이터 흐름을 갖기 때문에, 부모 자식 관계에서 데이터를 전달하게 된다. 위에서 아래로 흐르는 데이터 흐름이 깊어질 수록 데이터를 전달하는데 불편함이 생긴다. 이렇게 구성된 컴포넌트가 있다. 이것은 로그인폼에서 로그인을 하면 Shop과 Cart컴포넌트에 상태를 업데이트 한다. 그리고 product에서 카트에 담으면 Cart에 상태를 업데이트 하는 작업을 한다면, 데이터는 단방향으로 흐르기 때문에 LoginForm에서 Shop과 C..

✍🏻유데미 리액트 강좌를 보고 정리한 내용입니다. Portal 사용법 ReactDOM.createPortal(child,container) child : 엘리멘트,문자열 등 렌더링 가능한 리액트의 요소나 컴포넌트가 온다. container : DOM엘리먼트 즉, 이동하고 싶은 위치를 지정한다. 모달 예제 강의에서 모달을 구현해보면서 어떤식으로 동작하는지 연습 할 수 있었다. index.html에서 이동할 위치를 지정해준다. Modal.js에 Backdrop,ModalOverlay,Modal 컴포넌트를 만들어준다. //Backdrop컴포넌트 const Backdrop = (props) => { return ; }; //ModalOverlay컴포넌트 const ModalOverlay = (props) => ..

1.Fragment를 사용하는 이유 공식문서의 예제를 확인해보자.아래와 같은 테이블 컴포넌트가 있다. const Table = () => { return( ); } 는 여러 를 반환 해야 하는데, div로 자식을 감싼다면 렌더링 된 table은 유효하지 않을 것이다. const Columns = ()=> { return ( Hello World ); } Table의 결과 Hello World Fragments는 이런식으로 의미없는 를 사용하는 문제를 해결해준다. import { Fragment } from "react"; const Table = () => { return ( Hello World ); } 2.단축 문법 Fragment대신 이런식의 축약형으로 사용이 가능하다. import { Fragme..

1. Props 1️⃣객체로 전달되는 Props properties의 줄임말인 props는 어떠한 값을 컴포넌트에 전달할 때 사용한다. 객체 전달의 규칙 1.props는 객체로 전달된다. 2.props를 전달할 때는 문자열은 큰 따옴표("") 3.문자열을 제외한 모든 값은 중괄호( {} ) 로 전달한다. //App.js function App(){ return ( ) } //User.jsx function User(props){ return( 회원번호 : {props.number} 회원 이름 :{props.name} ) } 객체로 전달되는 props는 구조분해 할당을 통해 간결하게 작성 가능하다. function User({number , name}){ return 회원번호 : {number} 회원 이름..

1.불변성(Immutable) 불변성이란 이름 그대로 변하지 않는 성질을 말한다. 값이나 상태를 변경 할 수 없다는 것을 의미하는데, 자바스크립트에는 원시타입(Primitive Type)과 객체타입(Object Type)이 존재한다. 원시 타입은 불변성을 갖고, 객체타입은 변경가능한 값들이다. 다음 예제를 보고 불변성이란 의미를 알아보자 (*원시타입과 객체타입의 콜 스택과 힙 메모리에 대한 내용은 포함하지 않고 있다) let primitive = 'a'; primitive = 'b'; console.log(primitive) // 'b' 이렇게 원시타입인 string을 primitive 라는 변수에 할당을 해주면 메모리에 저장된다. 불변성을 갖는 원시타입의 데이터인데, primitive = 'b' 라고 ..

SSR이란? Server-Side Rendering이라는 이름에서 알 수 있듯 서버 측에서 렌더링이 된다는 걸 뜻한다. 서버에서 사용자에게 보여줄 페이지를 모두 구성하여(html에 내용이 들어있는 상태) 사용자에게 페이지를 보여주는 방식이다 SSR의 장점 1.서버를 이용해서 페이지를 구성하기 때문에 CSR보다 페이지를 구성하는 속도는 늦어지지만, 전체적으로 사용자에게 보여주는 화면 구성의 완료 시점은 빠르다. 2.모든 컨텐츠가 HTML에 담겨 있기 때문에 SEO구축하기 좋다. SSR의 단점 1. 페이지 전환마다 화면 깜빡임이 발생한다. 사용자 경험이 떨어진다. 2.페이지 이동을 할 때 마다 서버에서 다시 받아오기 때문에 서버 과부화 위험이 있을 수 있다. 3.자바스크립트 파일을 늦게 받아와서 화면은 보이..