TIL-22.10.28

Children prop

 : 기본적으로 존재하는 prop

  <></> 여는태그,닫는태그 형태로 작성 --> 그 안에 작성된 코드가 children prop값에 담긴다

 

 

 

SCSS

 - 변수선언 :       $변수명: 속성값;

   변수 사용 :       $변수명

- @import "파일명"; 으로 SCSS파일 연결해 $변수명으로 변수 사용

 

 

 

리액트에서 <form>를 다루는 기본 방법

state를 만들고 target.value 값을 사용해서 값 변경

이때, value prop으로 state값 내려주고, onChange prop으로 핸들러 함수 넘겨줌

 

  + 폼 값을 객체 하나로 처리하기

  - 이벤트 객체의 target.name과 target.value 값을 이용해, 값을 변경 -> 객체형 state 하나만으로도 값 처리 가능

ex) const { name, value } = e.target;  //구조분해 할당

name : e.target.name / value : e.target.value

 

 

 

 

축약형 표기

객체 내 활용할 변수명과 프로퍼티네임이 같다면 하나만 작성하는것 가능

 + 함수에도 적용가능

   - 프로퍼티네임으로 사용할 함수명 = value로 사용할 함수명  --> 축약형표기 가능

 

 + 객체 내부에서 함수를 선언할때

ex) const user = { getFullName: function() {

                               return ~ }

  --> :(콜론) , function 키워드 생략가능

    getFullName() { return ~ };

 

 

계산된 속성명(computed property name)

const user = { [표현식] : 값 }

  -> 표현식을 대괄호로 감싸주면 표현식의 값을 프로퍼티네임으로 사용가능

 + 변수에 담긴값, 함수의 리턴값 도 사용가능

ex) [propertyName]     [getJob()]

 

 

 

 

Hook   

ex) useState같은 use 함수

 - 비동기 함수

 - 비동기 상활에서 이전 state 값 사용해서 새로운 state 값 만들때는 콜백하수를 넘겨주는 습관을 가지자

     이유) state의 세터함수는 state를 통째로 바꾼다

예를 들면, const [values, setValues] = useState( {a:1, b:2} );

setValues( {b:3} ); 실행하면 (통째로 바꿈)

결과로 values값이 {a:1, b:3}이 아니라 {b:3}이 된다

--> 그래서 콜백함수를 사용

 

 

 

 

switch

switch(변수) {

   case 'value1':  //변수 값과 value1값을 비교해서 일치하면 해당 case 실행

      ~

      break; //함수로 선언하면 return으로

   case 'value2:

      ~

      break;

   dafault:  //변수 값과 일치하는 케이스가 없으면 실행

      ~