https://orbit-orbit.tistory.com/m/28

 

[React] VS Code 사용 시 React에서 Emmet 사용하기

Emmet에 익숙해진 상태에서 React를 사용하면 참 별거 아닌데도 불편함이 느껴진다. 다시 Emmet을 활성화 시키는 방법을 찾아 나중을 위해 기록. 1. Mac의 경우 Command + , Window의 경우 Ctrl + , 를 통해 Sett

orbit-orbit.tistory.com

참조해서

 

 

 

동그라미 해놓은 편집창에 들어가서  큰괄호 안에 , 넣고 

 

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

 을 작성하고 저장하면 react 에서도 이제 emmet이 사용가능 해집니다.

그리고 setting json 을 찾기 힘들면 다른 방법으로는 ctrl + shift + p 창에 들어가서 workspace를 검색해서도 찾을수 있습니다.


사용법)

emmet abbreviations 가 나왔을때 tab을 누르면 적용되며
emmet abbreviations 나오지 않을 때, ctrl + space 를 누르면 됩니다.

 

주의사항) 

setting.json 파일을 검색해보면 2개가 있는데 

 

 // 기존 세팅
    "emmet.triggerExpansionOnTab": true, // tab
    "emmet.includeLanguages": {            
        "javascript": "javascriptreact",
        "*html": "html",
        }

이런식으로 작성되어 있는곳에 해야하며, trigger 안에 작성해야 적용되는것 같습니다. (해당코드 바깥에 적용하니 적용안됨)

 

- map() 메서드를 사용하는 이유

리액트에서는 state 내부의 값을 직접적으로 수정하면 안 된다. 이를 불변성 유지라고 한다.

push, splice, pop 같은 내장함수는 배열 자체를 직접 수정하게 되므로 불변성 유지 원칙에 적합하지 않다. 그 대신에, 기존의 배열에 기반하여 새 배열을 만들어내는 함수인 concat, slice, map, filter 같은 함수를 사용해야한다고 한다.

 

https://velog.io/@_seeul/React-React%EC%9D%98-state%EA%B0%80-%EB%B6%88%EB%B3%80%EC%84%B1%EC%9D%84-%EA%B0%80%EC%A0%B8%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

 

React | React의 state가 불변성을 가져야하는 이유

spread operator를 사용하여 setState하기 리액트에서 state값이 객체인 경우 setState를 통해 상태값을 업데이트 시킬때, spread operator를 사용해서 기존의 state값은 유지시키고 그것을 복사해서 업데이트한

velog.io

 

리액트에서 State란 컴포넌트의 상태를 말합니다.

 

 

 리액트는 성능을 위해 setState()를 단일 업데이트(batch update)로 한꺼번에 처리할 수 있습니다.

공식문서의 설명처럼, 불필요한 리-렌더링을 방지(렌더링 최적화)하기 위해 즉, 리액트의 성능을 위해 한꺼번에 state를 업데이트 한다고 하네요.

 

  • useState의 업데이트 방식은 2가지 방식이 있으며, 각각 다르게 동작한다.
  • useState 로 원시데이터가 아닌 데이터를 변경할때는 불변성을 유지해야 한다.

ex)

     funtion Example1(){

      const names = ['눈사람', '얼음', '눈', '바람'];

      const nameList = names.map(name=> <li> {name} </li>);

 

  return(

     

      return <ul>{nameList}</ul>; 

 

)

}

export ~~~ ;

-------------------------------------------------------------------------------------

리액트에서 key값이 있다면 어떤변화가 일어났는지 더욱 빠르게 알 수 있습니다.

key 값은 언제나 유일해야함 따라서 데이터 고윳값을 key로 설정해야 합니다.

하지만 컴포넌트에 고유한 번호가 없으면 콜백함수의 인수인 index를 사용하면 됩니다. 

고유한 값이 없을때만 index 값을 key로 사용해야 합니다. index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못합니다.

.

.

ex)  const nameList = names.map((name, index) => <li key = {index}> {name} </li>);

      return <ul>{nameList}</ul>;

}; 

+ Recent posts