기로그 기로그

유데미 강좌를 보고 공부한 내용을 정리해보았습니다. 여기서는 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.배열의 구조 분해 할당 1️⃣ES6 이전의 구조 분해 할당 구조 분해 할당은 배열 ,객체를 비구조화 하여 변수에 할당하는 것을 말한다. //ES5 var arr = [1,2,3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; //ES6 const arr= [1,2,3]; const [one,two,three] = arr; 배열에 있는 요소를 변수에 저장하기 위해 ES6이전에는 각각의 요소를 추출하여 변수에 할당해 주었다. 그에 비해 ES6의 배열 구조 분해 할당은 간단하고 코드가 줄어든 것..

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

1.단축평가 연산자(operator)는 하나 이상의 표현식을 대상으로 산술,할당,비교,논리,타입,지수 연산 등을 수행해 하나의 값을 만든다. 그 중 논리 연산자를 이용한 단축평가가 리액트를 공부하던 중 나왔는데, 이해가 부족해서 정리를 하려고 한다. || 논리합(OR)또는 && 논리곱(AND)의 평가 결과는 불리언 값이 아닐 수도 있다. 아래의 코드를 보자. '🙀' && '😻' --> 😻 AND연산자는 두개의 피연산자 모두 true일때 true이다. 첫 번째 값 '🙀'은 Truthy값이므로 true다. 하지만 아직까지는 위 표현식을 평가 할 수없다. 두 번째 '😻' 까지 평가해야지 위의 표현식을 평가할 수 있다. 두번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 반환하는 것이다. 즉 AND연산자는..

💀프레임 워크 프레임워크 : 뼈대 ,골격이라는 의미로 일정한 형태와 기능을 갖추고 있어 기능 구현에 집중하여 개발 할 수 있도록 도와준다. 예를 들어 DB연동하기위해 무엇을 써야하는지 메모리 관리, 이벤트 루프 등의 공통된 부분의 작업은 프레임워크가 관리하고, 사용자는 정해준 방식대로 움직이면 된다. 프레임워크의 예 Java서버 개발을 위한 Spring Python의 Django,Flask 안드로이드 앱 개발을 위한 Android 웹 개발의 Angular,Vue.js,Next.js등 ⚒️라이브러리 프레임워크 처럼 큰 골격이나 규칙이 정해져있지 않고, 조금더 좁은 문제를 해결하기 위한 도구. 필요에 따라 라이브러리를 사용 할 수 있으므로 자율성이 보장 된다. 라이브러리의 예 인터페이스 개발을 위한 Reac..