전체 글66 React 주요 개념 엘리먼트 렌더링 엘리먼트란 React의 가장 작은 단위로 html 태그의 시작 태그와 종료 태그 까지를 엘리먼트라고 합니다.. // 시작 태그 // 종료 태그 // 빈 태그 a tag // 엘리먼트 // 엘리먼트 같은 경우는 빈 요소(empty element)라고 하며 내용이 없는 경우를 말한다. ex) , 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. DOM에 엘리먼트 렌더링 보편적으로 react 엘리먼트를 랜더링 할 때 ReactDOM으로 관리하며 이것을 루트 DOM 노드라고 합니다.. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. .. React 주요 개념 JSX JSX는 자바스크립트(JavaScript) 문법의 확장판입니다. JSX는 react에서의 요소(Element)를 제공합니다. JSX 문법을 react에서 사용하게 된 배경에는 react.createElement()가 가지고 있는 문제점을 개선하기 위함입니다. 하단 예시를 참고해 주세요. JSX // JSX Style 홈 마이페이지 로그아웃 React.createElement() // React.createElement() Style React.createElement( "header", {id: "intro"}, React.createElement( "ul", {className: "nav"}, React.createElement( "li", "홈" ), React.createElement( "li", .. JavaScript 타입별 정리 Undefined 전역 undefined 속성은 undefined 원시타입을 나타내며 전역 스코프 변수입니다. 값을 할당하지 않은 변수는 undefiend 자료형이되며 메서드와 변수 선언도 변수값이 지정되어 있지 않은 경우 호출시 undefiend를 반환합니다. 함수는 값을 명시적으로 반환하지 않으면 undefined를 반환합니다. var x; if (x === undefined) { // true } var x; if (typeof x === 'undefined') { // true } // y를 선언한 적 없음 if (typeof y === 'undefined') { // 오류 없이 true로 평가 } if(y === undefined) { // ReferenceError } Javascript 변수(Variables) Javascript에서 새로운 변수를 선언할 때 var, let, const 키워드가 사용 가능합니다. 변수는 애플리케이션에서 한번 쓰고 버리는 값이 아닌 일정 기간 유지할 필요가 있는 값에 사용하며 변수를 사용하면 값의 의미가 명확해져 코드 가독성 증가에 도움이 됩니다. 변수명을 지정할때 변수의 존재 목적에 알맞은 변수명을 지정해야 이후 유지보수 시 도움이 됩니다. var abc = '2025-01-22'; // bad case var today = '2025-01-22'; // good case 변수명은 식별자(identifier)로 불리기도 하며 명명 규칙이 존재한다. 반드시 영문자(특수문자 제외), underscore ( _ ), 또는 달러 기호($)로 시작하여야 한다. 이어지는 문자에는 숫자(0.. JavaScript 타입별 정리 Object (2) 객체 프로퍼티 프로퍼티 키 프로퍼티 키는 일반적으로 문자열(빈 문자열 포함)을 지정한다. 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 또한 문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하다. 프로퍼티 키는 문자열이므로 따옴표(‘’ 또는 ““)를 사용한다. 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다. 반대로 말하면 자바스크립트에서 사용 가능한 유효한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다. 프로퍼티 값은 모든 값과 표현식이 올 수 있으며 프로퍼티 값이 함수인 경우 이를 메소드라 한다. var person = { 'first-name': 'test', 'last-name': 'Lee', ge.. JavaScript 예약어 모음 자바스크립트에서, 몇몇 식별자는 예약어여서 변수나 함수 이름으로 사용할 수가 없습니다. 사용할 수 없는 예약어 목록은 아래와 같습니다. abstract arguments boolean break byte case catch char class* const continue debugger default delete do double else enum* eval export* extends* false final finally float for function goto if implements import* in instanceof int interface let long native new null package private protected public return short static super* .. JavaScript 타입별 정리 Object (1) 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 자바스크립트의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 이와 같이 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의.. JavaScript 타입별 정리 Null JavaScript에서 null은 원시타입 중 하나로 어떤 값이 비어있음을 선언하며 boolean 연산에서는 false로 취급됩니다. null은 javascript의 빈값에 대한 리터럴 표현입니다. null은 undefined와 같은 전역 객체의 식별자가 아닙니다. 대신 식별되지 않은 상태를 나타내며 API에서의 null은 객체가 기대되지만 해당되는 객체가 없는 곳에 발생합니다. // foo 는 존재하지 않는다. 정의되지 않고 초기화 된 적도 없다 foo "ReferenceError: foo is not defined" // foo 가 존재하는 것을 알고 있지만 타입이나 값이 없다 var foo = null; foo // "null" null 또는 undefined의 차이 typeof null // "o.. JavaScript 타입별 정리 Symbol JavaScript에서 Symbol은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 심볼의 값은 객체 프로퍼티에 대한 식별자로 이것이 심볼 데이터 형식의 유일한 목적입니다. const symbol1 = Symbol(); const symbol2 = Symbol(42); const symbol3 = Symbol('foo'); console.log(typeof symbol1); // expected output: "symbol" console.log(symbol2 === 42); // expected output: false console.log(symbol3.to.. 이전 1 ··· 4 5 6 7 8 다음
