-

속성 존재 여부 확인 객체에 없는 속성 접근 시 undefined가 리턴 되므로 해당 조건을 통한 존재여부 확인 가능 특정 속성이 false로 반횐될 수 있는 값(0, false,빈 문자열)이 아닐 떄에는 단순 조건문 처리로 처리 const person = { name: 'John', age: 20, hobby: '', }; person.gender === undefined ? console.log('속성 존재하지 않음') : console.log('속성 존재'); // false로 반환될 수 있는 경우를 대비한 전제한 상태로 조건 처리 person.hobby || console.log('속성존재') // false로 변환될 수 있는 값이 들어오지 않을 것이라는 전제가 있을 시 기본 속성을 지정해둠 pe..

객체데이터를 { }로 감싸 객체를 정의데이터 타입의 제한이 없음키를 사용하여 데이터를 불러오거나 값을 변경할 수 있음const로 선언할 경우 객체 자체를 변경할 수는 없으나, 객체 안의 프로퍼티나 메서드는 변경이 가능객체의 키와 속성 값이 같을 경우 하나로 입력가능 객체 선언중괄호로 생성하면 쉼표로 연결하여 입력객체 생성 시 key는 식별자와 문자열 모두 사용가능하나 식별자로 사용할 수 없는 단어 사용 시 문자열로 선언객체 생성 시 new 예약어를 사용변수로 선언된 key와 value를 객체 속성으로 활용 시 key는 []로 감싸 활용 //  객체 초기화 const 객체명 = {}const 객체명 = new Object()//  객체 초기화 const 객체명 = {    key: value,    key..

props 컴포넌트 간에 속성을 전달하고 동적으로 데이터를 렌더링 React에서 props는 컴포넌트 사용 시 부모 컴포넌트에서 설정하는 값으로 컴포넌트 자신은 props를 읽기 전용으로만 사용 가능 모든 리액트 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수 처럼 동작 해야함 단방향 데이터 흐름 : 상위 컴포넌트 → 하위 컴포넌트로 값을 전달 부모 컴포넌트 : 수정 가능 / 자식 컴포넌트 : 읽기만 가능 props는 설계서를 별도로 가지고 있는게 좋음 Props Type 지정 String 타입 : 따옴표 사용 : " String 이외 타입 : 중괄호 사용 : { } // String Type // exculde String Type alert('1) bool={true}} /> prop 사용방법..

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 let a, b, rest; [a, b] = [10, 20]; console.log(a); // Expected output: 10 console.log(b); // Expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // Expected output: Array [30, 40, 50] 배열 구조 분해 var foo = ["one", "two", "three"]; var [red, yellow, green] = foo; console.log(red); // "one" console.log(yellow); //..

Hook React 16.8 부터 추가된 React 요소 React 또는 React Class형 Component에서 이용하던 코드를 작성할 필요없이 함수형 Component에서 다양한 기능을 사용할 수 있게 만들어준 Library Class 없이 React를 사용할 수 있게 해주는 함수 함수 컴포넌트에서 React State와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 Hook을 사용 use라는 키워드로 시작 Hook 특징 서로 비슷한 동작을 하는 것을 작은 함수z 묶음으로 컴포넌트를 나눌수 있음 함수형 Component에서만 사용 가능 비동기 방식(async) Class없이 React 기능들을 사용하는 방법 제시 Hook..

Component React로 만들어진 앱을 이루는 최소한의 단위로 화면에 출력되는 요소 자바스크립트 함수와 유사하며, UI를 재사용 가능한 개별적인 단위로 나누어 활용 컴포넌트는 데이터를 다루며 그 결과로 UI를 렌더링 데이터(props)를 입력 받아, View(State) 상태에 따라 DOM 노트를 출력, React 엘리먼트를 반환 기존의 웹프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었으나 컴포넌트는 MVC의 View를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 생성가능 컴포넌트는 자체 props를 수정하면 안됨 // [형식] 컴포넌트 생성 // [형식] 컴포넌트 출력 ReactDOM.render(컴포넌트, 컨테이너..

React Element : 리액트 앱의 가장 작은 단위로 화살표에 표시할 내용을 기술 DOM을 그대로 반영 DOM에 엘리먼트 렌더링 React로 구현된 애플리케이션은 기본적으로 하나의 루트 DOM 노드가 있음 렌더링 순서 ReactDOM.createRoot()에 DOM 엘리먼트 전달 React 엘리먼트를 root.render()에 전달 const root = ReactDOM.createRoot( document.getElementById('root') ); const element = Hello, world; root.render(element); 렌더링 된 엘리먼트 업데이트 React 엘리먼트는 기본적으로 생성한 뒤 자식이나 속성을 변경할 수 없음. 이를 변경하기 위해서는 새로운 엘리먼트를 생성하여 ..

React 정의- Meta 에서 만든 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용 - 컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움React 특징새로고침 없이 다른 페이지 이동가능JSX 사용Component이 조합 구성 - 재사용성 향상으로 개발 기간 단축, 유지보수 용이Virtual DOM 사용하여 DOM 업데이트를 추상화 함으로 처리 횟수를 최소화하여 효율적으로 관리하여 빠른 처리가 가능React Native를 활용하여 앱 개발 가능지속적인 버전 업데이트 및 라이브러리로 인한 방대한 학습 진행과 상태 관리(state)가 복잡한 단점이 있음리액트 DOM 업데이트 과정데이터를 업데이트하면 전체 UI를 Virtual DOM에 Rerender..

JSX (JavaScript XML) 자바스크립트에 XML을 추가한 확장 문법 Javascript의 공식적인 문법이라고 할 수는 없다. 브라우저에서 실행 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트 형태의 코드로 변환. Javascript에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 장점이자 사용하는 이유 React에서의 JSX React.ceateElement()의 호출을 통해 일반 자바스크립트 객체인 'React 엘리먼트'로 컴파일 됨 Babel은 JSX를 React.createElement() 호출로 컴파일 함 // 아래 두 코드는 동일 const element = ( Hello, world! ); const element = React.createEl..

◎ 클로저 함수 : 함수가 종료되어도 함수 내부에 만든 지역변수가 사라지지 않고, 계속 값을 유지하는 상태를 클로저라고 하며, 내부에 있는 함수를 클로져 함수라고 함 - 연관있는 변수와 기능(중첩함수)을 하나의 함수로 묶어 독립적으로 실행 가능 - 함수 내부에 데이터가 만들어지기 떄문에 함수 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있음 - 객체지향 프로그래밍에서는 private data, 캡슐화된 data라고 칭함 * 기본 문법 function name(callback){ 로직구현 callback(결과) // 로직 처리 부분을 다른 함수에 넘겨줌 } • Sources function createCounter() { let cnt = 0; // 지연 변수 선언 후 // add()가 클로저 함수가..