리액트 공부 2일차 외울것

1. react에서는 undefined만 반환하여 렌더링하는 상황을 막아야 합니다.
-> 해결 : undefined값을 만들어준다

//받아오는값 || undefined값
{ name || '리액트' }

2. 스타일을 줄때, 공통스타일을 style-component를 사용할지, 객체로 만들어서 사용할지, less를 사용할지는 선택
ex

객체로 만들어 사용

3. new 연산자와 생성자 함수 / 화살표함수

1) 생성자 함수

생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다.

1. 함수 이름의 첫 글자는 대문자로 시작합니다.
2. 반드시 "new" 연산자를 붙여 실행합니다.

function BlackDog () {
  this.name = '흰둥쓰'
  return {
    name : '검둥이',
    bark : function () {
      console.log(this.name + ': 멍멍');
    }
  }
}

const Black = new BlackDog();
Black.bark();

function WhiteDog () {
  this.name = '흰둥쓰'
  return {
    name : '검둥이',
    bark : () => {
      console.log(this.name + ': 멍멍');
    }
  }
}

const whitek = new WhiteDog();

white.bark();

function YellowDog () {
  var name = '누렁이';
  return {
    name : '검둥이',
    bark : function () {
      console.log(this.name + ': 멍멍'); //검둥이
      console.log(name + ': 멍멍'); //누렁이
    }
  }
}
YellowDog().bark()

저렇게 this 넣어가면서 만든당

 

2) 화살표 함수

function twice( value ) {
	return value * 2;
}

const triple = ( value ) => value * 3;

화살표 함수에서 { } 안열어주면 값을 그대로 반환한다는 의미

 

4. 배열의 비구조화 할당

cosnt array = [1,2];
const [one, two] = array;


//const [one, two] = array; = 
//const one = array[0];
//const one = array[1;

5. Form 요소는 값이 바뀔때 onChange 함수를 사용함

6. 우리가 직접만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없습니다.

7. p123 이벤트 종류