- 학습 목표 1 : 웹 응용 개념 정리
- 학습 목표 2 : 리액트 기초 개념 정리
-
객체나 배열의 마지막 요소 뒤에 콤마를 붙이는 것
-
이유
- 요소를 추가, 삭제, 이동할 때 더 쉽게 변경할 수 있다.
- 요소를 추가하는 경우,
- 마지막 요소 뒤에 콤마가 없었다면, {마지막 요소에 콤마를 추가 + 새로운 요소 추가} 두 단계를 거쳐야 한다. => 수정과 추가
- 마지막 요소 뒤에 콤마가 있었다면 추가만 해주면 된다.
- 코드를 병합할 때 충돌을 방지할 수 있다.
const arr = [1, 2, 3, 4, 5]; const obj = { name: "john", age: 30, job: "developer", };
- 일급 객체 함수의 개념을 이용해 스코프에 묶인 변수를 바인딩하기 위한 기술
- 함수가 속한 렉시컬 스코프를 기억하여, 함수가 렉시컬 스코프 밖에서 실행될 때에도 그 스코프에 접근 할 수 있게 하는 기능
렉시컬 스코프란? 중첩된 함수에서 내부 함수가 외부 함수의 변수에 접근할 수 있는 것
function createCounter() {
let count = 0;
function increment() {
console.log(count);
}
increment();
}
console.log(count); // 이 코드는 실행되지 않습니다. count는 createCounter의 지역 변수입니다.
createCounter(); // 이 코드는 정상적으로 작동하여 '0'을 출력합니다.increment함수는createCounter함수의 지역 변수인count에 접근할 수 있다.increment함수가createCounter함수의 렉시컬 스코프에 접근할 수 있는 것.
- 객체가 새로 생성될 때마다 기본적으로 갖게되는, 상속받을 수 있는 속성과 메서드들의 집합
- 모든 객체는
__proto__라는 프로퍼티를 가지고 있으며, 이 프로퍼티는 객체의 프로토타입을 가리킨다. - 객체의 프로토타입은 다른 객체를 참조할 수 있으며, 이를 통해 상속을 구현할 수 있다.
function house() {
this.tv = "samsung";
this.computer = "apple";
} // 자식들이 직접 가지고 있음
var wayne = new house();
// 부모 프로토타입 추가
house.prototype.laptop = "LG";
// 추가된 부모의 프로토타입을 자식에게 상속
console.log(wayne.laptop); // LG-
Object에서 자료를 가져올 때
- 자신이 가지고 있는지 확인
- 없으면 prototype(부모)에서 가져옴
- 없으면 prototype(부모)의 prototype(조부모)에서 가져옴
class ClassName {
constructor(parameters) {
// 생성자 함수, 객체의 초기 상태를 설정
// this 키워드를 사용하여 객체의 속성을 초기화
}
method1() {
// 클래스 내부의 메서드 정의
}
method2() {
// 또 다른 메서드 정의
}
}-
페이스북에서 개발한 JS 라이브러리
-
상태(state)에 따라서 컴포넌트의 구성 요소를 바꾸는 방식을 지원한다.
-
상태를 변경할 때는 단방향 바인딩 을 사용한다. 이는
상태 변경 -> 컴포넌트 변경구조를 강제해 상태에 대한 변경을 단방향으로 명시적으로 이루어지게 한다. => 화면이 변화했다면, 개발자들이 변화한 상태를 찾고 해당 데이터를 변경한 함수만 찾으면 되기 때문에 유지보수가 쉽다. -
JSX(Javascript Syntax eXtension)
javascript에서 xml과 유사한 구문을 사용해 html을 작성할 수 있도록 하는 문법
// angular <div *ngIf="condition">condition이 truthy 할 경우 해당 Element가 보여집니다.</div> // JSX { condition ?? <div>condition이 truthy 할 경우 해당 Element가 보여집니다.</div> }
- 독립적으로 작동하며 재사용 가능한 개별 구성 요소
- 컴포넌트는 자체적으로 상태를 가질 수 있으며, 상태가 변경되면 리렌더링된다.
- 코드의 재사용성과 관리 효율성을 높이기 위해 사용한다.
- JSX를 사용하여 컴포넌트를 정의하고 props와 state로 관리한다.
- Props
- 자식 컴포넌트를 사용하는 부모 컴포넌트에서 할당한 요솟값
- 읽기 전용
- State
- 컴포넌트의 상태를 추적하고 UI를 동적으로 업데이트하기 위해 사용되는 데이터
- 컴포넌트 내부에서만 사용
- Props
함수형 컴포넌트와클래스형 컴포넌트가 있다.
class SampleComponent extends React.Component {
render() {
return <h1> Hello, World! </h1>;
}
}- 스크럼 중 완료한 작업:
웹 응용 개념 정리,리액트 기초 개념 정리 - 오랜만에 리액트를 다룰 수 있어서 좋았다!