Homile

Portals Fragment를 사용하면 깔끔한 코드를 작성할 수 있습니다. React Portals은Fragment와 비슷한 일을 하여 간결한 코드를 작성하는데 사용됩니다. 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법입니다. ReactDOM.createPortal(child, container) 첫 번째 인자 child는 엘리먼트, 문자열, fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식 요소입니다. 두 번째 인자 container는 DOM 엘리먼트입니다. 사용법 일반적인 컴포넌트 렌더링 메서드에서 요소를 반환할 때, 해당요소는 부모 노드에서 가장 가까운 자식으로 연결됩니다. portal의 전형적인 동작 방법은 부모 컴포넌트에 ov..

React.Fragment란? DOM에 별도의 노드를 추가하지 않고 여러 자식 요소를 그룹화할 수 있습니다. JSX 제한 사항 JSX 코드를 작성할 때 Root 요소가 존재하지 않고 나란히 존재하고 있다면 JSX 문법에 위반하는 행위가 됩니다. 아래의 코드와 같이 JSX는 ReactDOM 요소로 작성이 가능합니다. 한개의 Root 요소 안에는 여러개의 요소가 존재할 수 있지만 Root 요소는 여러개가 존재할 수 없다는 것입니다. // JSX 문법에러 return ( 안녕하세요 여러분!! 만나게 되어 반갑습니다! ); // JSX 문법을 ReactDOM으로 변경한 코드 return ( React.createElement('h2' {}, '안녕하세요 여러분!') React.createElement('p' {..

리액트 에러 발생 React server를 실행하고 있을 때, 콘솔에서 에러 코드가 나오지만 웹페이지에서도 콘솔창과 동일한 에러 코드가 나옵니다. 에러코드와 함께 해결할 수 있는 방향을 제시해줍니다. 해당 에러 코드 조각과 해결 방안을 통해 프로그램을 디버깅* 할 수 있습니다. 이렇기 때문에 항상 콘솔에 나오는 에러 코드를 확인해야 합니다. 자주 발생하는 에러 JSX 요소 규칙 JSX로 작성한 요소를 하나의 루트 요소로 감싸주어야 합니다. 이때, 쓸모없는 태그로 감싸줄 시 디자인 요소에 방해가 될 수 있습니다. 이것은 React.fragment()를 사용하여 하나의 루트 요소로 감싸주어 에러를 해결할 수 있습니다. 함수명 오타 State를 관리하는 함수를 자주 사용해야 하는 만큼 함수명이 많아짐에 따라 ..

Redux? Redux는 전역 상태 관리 라이브러리이다. Redux와 같은 라이브러리로는 Mobx, Recoil, Ovemind.js가 있다. 가장 많이 사용되는 것은 Redux이며, 다음으로 Mobx가 있었는데 Recoil이 등장하면서 점점 사용율이 밀리는 추세이다. Redux를 사용하는 이유 1. 모든 컴포넌트가 props 없이 state를 직접 꺼낼 수 있다. 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는 데 하위 컴포넌트가 너무 많을 경우 사용 state를 보관하는 파일을 하나 만들어서 state를 다 보관하여 모든 컴포넌트들이 props 없이 꺼내서 쓸 수 있다. 2. 상태(state) 관리하기 용이하다. 모든 컴포넌트에서 state를 변경하기 시작할 경우 버그가 생기면 모든 컴포넌..

Create React App 리액트 프로젝트를 시작하는 가장 쉬운방법입니다. 기본적인 리액트 코드 파일이 있는 미리 설정된 폴더들과 상용화할 수 있는 리액트 앱을 구축할 수 있도록 돕는 가장 중요한 환경설정 파일들이 존재합니다. 작성한 프로그램을 미리보기 할 수 있도록 해주고 코드나 기타 다른 것들이 변경될 때마다 브라우저가 자동적으로 페이지를 업데이트 하는 방식으로 이 프로그램을 미리 볼 수 있어 개발 과정을 단순화시켜 줍니다. node.js 브라우저 밖에서 자바스크립트 코드가 실행될 수 있도록 하는 자바스크립트 런타임이 필요하다. 리액트를 위해 필요한 것은 아니지만 create react app을 실행하기 위해 node.js가 필요하기 때문에 node.js를 먼저 설치를 해줘야 한다. 다운로드 | ..

React? JavaScript 라이브러리이며 사용자 인터페이스를 만드는 데 사용됩니다. 화면을 새로고침하여 모든 요소를 렌더링 하지 않고, 요청하는 요소만 렌더링하는 방식인 SPA를 사용한다. 내장된 기능은 많지 않아서 라우팅 같은 기능이 필요하다면 추가적으로 서드 파티 라이브러리를 설치해야 한다. React를 사용하는 이유 일반적인 DOM을 조작하여 HTML들의 요소들을 렌더링 할 때는 JavaScript만 사용해도 가능하지만 사용자에게 뭔가 다른 요소들을 보여주려 할 때 새로운 HTML 페이지를 불러오지 않고 화면만 변경해 사용자에게 보여줄 수 있게 해주는 것이 가능하다. 개발자에게 확장 가능한 대화형 웹 응용 프로그램을 구축하기 위한 검증된 도구를 제공하는 코드를 작성할 수 있다. 최신 반응형 사..

Local Storage란? 브라우저 내 데이터를 가지고 있는 저장소 sessionStorage와 같지만 sessionStorage는 브라우저를 닫을 경우 데이터가 삭제된다. Local Storage는 브라우저를 새로고침, 닫기를 실행해도 데이터가 보존된다. 하지만, 시크릿 모드를 사용하여 Local Storage에 담긴 데이터는 시크릿 모드로 열린 브라우저를 닫으면 데이터가 삭제된다. Local Storage 사용법 로컬 스토리지 내 데이터 저장 객체 형태로 저장 된다. // key value localStorage.setItem('minwoo', 'cho'); 로컬 스토리지 내용 가져오기 const name = localStorage.getItem('minwoo'); 로컬 스토리지 내용 삭제 loca..

클로저란? 외부 함수의 변수에 접근 할 수 있는 내부 함수 JavaScript MDN: 클로저는 함수와 함수가 선언된 어휘적 환경의 조합, 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다 어휘적 환경의 조합이라는 것이 낯설게 느껴진다. 하지만, 앞서 작성한 스코프에 대해서 이해를 하고 온다면 유효범위가 지역범위라는 것을 알 수 있다. 외부함수, 내부함수(클로저) 외부 함수 안에 있는 함수가 내부함수이며, 클로저라고 불린다. 외부함수는 내부함수의 변수를 사용하지 못한다. 내부함수는 외부함수의 변수를 사용할 수 있다. 내부함수는 여러개를 작성할 수 있다. function init() { let name = "minwoo"; // nam..

스코프(Scope) 변수의 접근할 수 있는 '유효범위'를 나타낸다. 스코프의 접근 범위 전역 스코프(Global Scope): 가장 바깥의 범위 전역 스코프에서 선언한 변수는 지역 스코프에서 사용이 가능하다. 지역 스코프(Local Scope): 전역 스코프가 아닌 나머지 범위 지역 스코프에서 선언한 변수는 전역 스코프에서 사용이 불가능하다. let hi = 'hello'; // 전역 스코프 function talkMessage(){ // 지역 스코프 let message = 'JavaScript'; return hi + ' ' + message; } console.log(talkMessage());// 'hello JavaScript' console.log(hi);// 'hello' console.lo..

객체(Object) 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이며, JavaScript의 객체는 key와 value로 구성된 property들의 집합이다. 객체의 구조 key와 value가 존재 key: 빈 문자열을 포함하는 모든 문자열 value: 모든 데이터 값 let obj = {}; // 'key' 'value' obj['name'] = 'cho'; console.log(obj);// {name: 'cho'} 객체 생성 {} 객체 리터럴 방식으로 생성할 수 있다. new Object 함수로 생성할 수 있다. // 객체 리터럴 방식 let obj1 = {}; // Object 생성자 함수 let obj2 = new Object(); 객체 key, value 할당 객체..