웹프로그래밍 무작정따라하기/React7 [ React ] vscode에서 JSX태그 자동완성(emmet) 적용하기 react, nextjs를 사용 시 JSX태그에서도 자동완성을 하고 싶은데 되지 않아 답답한 경우가 생김! setting.json에서 jsx emmet 설정! setting.json 들어가는 단축키 -> Ctrl + Shift + P vscode 설정에 들어가 setting.json에 코드 추가 "emmet.syntaxProfiles": { "javascript": "jsx" }, "emmet.includeLanguages": { "javascript": "html" } 적용 후, JSX문법에서도 자동완성이 되는 것을 확인 할 수 있습니다. 별거 아니지만 참.. 실무에서 꼭 필요한 기능 emmet!!!!! 2022. 12. 1. [React] immer를 사용한 불변성 지키기 immer라이브러리 사용하기 사용용도 immer를 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성을 유지하게 해줌! 불변성을 깨트리는 행위의 코드 const object = { a:1, b:2 }; object.b = 3; // b의 값을 직접적으로 수정하면 안됨 불변성을 유지하면 변경한 올바른 코드 cosnt object = { a:1, b:2 } const nextObject = { ...object, // 스프레드 기법을 사용하여 a, b값그대로 복사후 b: 3 // b값을 덮어 씌어줌 } 라이브러리 설치 프로젝트의 터미널에서 immer설치 명령어 입력 $ yarn add immer immer 라이브러리를 사용할 땐 import를 통해 immer를 불러옴.보통 produce라는 이름으로 불러온.. 2021. 3. 5. [React] useRef로 특정 DOM으로 focus설정하기 useRef (hook)함수? 특정 DOM선택할 때 다시 랜더링 되어도 동일한 참조값을 유지 할 때 useRef로 특정 DOM선택하기 특정 엘리먼트의 크기나 위치를 가져오거나 스크롤바 위치를 가져오거나 설정하거나 포커스의 위치를 설정하거나 라이브러리를 이용할 때 특정 DOM에다가 설정해야하는 부분이 발생할 때 사용하게 됨 즉, 컴포넌트에서 특정 DOM을 선택해야 할 때, ref를 사용해야하고, 함수형 컴포넌트에서 이를 설정할 때는 useRef를 사용하여 설정해야함 패키지 구조 App.js import React from 'react'; import InputsSample from './components/InputsSample'; function App() { //사용하고자하는 componets호출 re.. 2021. 3. 2. [React] 조건부 렌더링 용도에 맞게 "삼항연산자" 또는"and연산자"를 이용하여 조건부 렌더링 하기 App.js (부모컴포넌트) import React from 'react'; import './App.css'; import Hello from './component/Hello'; import Wrapper from './component/Wrapper'; class App extends React.Component { render() { return ( {/* 스크립트로 전달할 경우는 {}를 사용해서 값 전달 isSpacial로만 전달할 경우 true로 전달 되어서 isSpacial={true}난 isSpacial이나 동일하게 적용됨 */} ); } } export default App; Hello.js (자식컴포넌트) im.. 2021. 2. 13. 이전 1 2 다음
