728x90 Frontend/React40 React 상태관리🌱외 minor concept 상태 React에서는 컴포넌트 기반의 코드를 작성하게 됩니다. 컴포넌트는 여러 곳에서 재사용을 할 수 있고 추상화를 잘 이용하면 가독성이 좋은 코드를 작성하게 해줍니다. 컴포넌트는 상태를 가집니다. 예를 들면 이 블로그의 라이트/다크 모드, 카카오톡 대화창의 안읽은 메시지수 와 같은것들은 상태입니다. 상태는 사용자에게 보여지는 것을 의미하고 상태의 변경은 렌더링을 새로해주어야 함을 의미합니다. 사용자가 블로그의 라이트 모드에서 다크모드를 눌렀으면 어두운 화면을 보여주어야 하고 카카오톡 대화창의 메시지를 전부 읽었다면 안읽은 메시지 수는 0, 하나씩 올때마다 카운트를 올려주어야 할 것입니다. 컴포넌트는 자신이 정의한 상태를 가질수 있고, 서버로부터 데이터를 받아 자신의 상태로 정의할 수도 있고, 부모 컴포.. 2022. 4. 7. React css-in-js https://betterprogramming.pub/all-you-need-to-know-about-css-in-js-984a72d48ebc를 번역한 글입니다. All You Need To Know About CSS-in-JS CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). You’ve probably heard terms like CSS-in-JS, Styled Components, Radium, and Aphrodite, and you’re… betterprogramming.pub CSS-in-JS는 CSS model을 document 레벨이 아닌 component.. 2022. 4. 6. React form 블로그 따라 다루기 https://jeonghwan-kim.github.io/dev/2022/03/29/react-form-and-formik.html 리액트로 폼(Form) 다루기 폼 다루는 방법에 대해 얘기해 보자. 브라우져는 폼을 다루기 위한 내장 API를 가지고 있다. 이걸 이용하면 빠르게 폼을 만들수 있는데 이전에 한 번 정리했다. HTML5 폼 검증에 대해 정리해 보자 jeonghwan-kim.github.io 의 포스팅 내용에서 많은 인사이트를 얻을 수 있을것 같아 따라해본 과정입니다!! 머릿속에 강하게 남은 내용을 정리하고자 한다. 기존의 로직을 커스텀 훅으로 추출(연관된 로직이 전부 커스텀 훅에 위치하게 되는 과정, 세부구현은 밖에서 넣어준다) 추상화를 사용함으로써 속성은 숨기고 가독성은 증가(중요 개념만 .. 2022. 4. 6. React keys React에서 key는 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 도와줍니다. key는 꼭 지정하는 것이 좋고 data의 id와 같이 고유한 값을 지정해 주는 것이 좋습니다. 이때 전체 파일에서 고유할 필요는 없습니다. 인접한 리스트에서만 key 값은 고유하면 됩니다. 항목의 순서가 바뀔 수 있는 경우에 key값에 Index값을 사용하는 것은 적절치 않습니다. 불필요한 렌더링이 일어날 수 있습니다. key값을 명시해주지 않으면 React는 기본적으로 index를 key로 사용합니다. React에서는 인접한 요소들에서 Key 값이 설정되어 있지 않다면 index 값을 default로 사용한다고 하였습니다. 위의 gif에서 input에 있는 값들의 동작은 분명 이상합니다. list의 뒤에 추가될 때는.. 2022. 4. 2. React input onFocus, onBlur(focus out) 😶🌫️ react에서 input에 focus out을 이용하고 싶을때는 onBlur를 이용하면 됩니다. javascript react focusin onFocus focusout onBlur focusout으로 계속 시도해보다가 onBlur를 최근에 알게되었습니다. 아래에 예제 추가해 두었습니다. react 깃헙에서 관련 issue도 첨부해 두겠습니다! react-dom 라이브러리에서 focusIn, focusOut 관련 부분도 캡처 & 링크 걸어두겠습니다. HTML 삽입 미리보기할 수 없는 소스 https://github.com/facebook/react/issues/6410 onFocusIn/onFocusOut events · Issue #6410 · facebook/react Like mouse enter.. 2022. 4. 2. React moment locale 적용하기 🌹 React에서 moment를 사용하는 경우 locale을 변경하고자 하면 직접 import 해주어야 합니다. import moment from 'moment' import 'moment/locale/fr'; import 'moment/locale/kr'; export default function App(){ 생략 } moment는 시간을 다룰때 굉장히 유용한 library 입니다. 그래서 굉장히 널리 사용되고 있습니다. moment는 파일사이즈가 큽니다. 그래서 day.js와 같이 파일사이즈가 작고 moment와 쓰임새가 유사한 라이브러리를 사용하라는 정보를 접한적이 있습니다. cra로 시작한 경우 moment의 locale을 변경해주려면 위와 같이 locale file을 직접 import 해주어야 합.. 2022. 4. 2. 이전 1 2 3 4 5 6 7 다음
