본문 바로가기
반응형

JavaScript49

27.리액트 컴포넌트 스타일링하기 리액트에서 컴포넌트를 스타일링 할 때에는 다양한 기술이 사용될 수 있음 리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 컴포넌트에서 import 해서 사용하는 것 이 방법은 어떤 사람들에게는 충분히 편리할 수도 있겠지만, 컴포넌트를 스타일링 할 때 다른 도구들을 사용하면 훨씬 더 편하게 작업을 할 수 있음 Sass CSS Module styled-components 위 기술들을 다뤄보게 되면서, 단순히 사용법만 알아보는걸 떠나서 나중에 여러분들이 실무를 다루게 될 때에도 충분히 도움이 될 수 있는 재사용성이 높은 버튼을 만드는 방법, 커스텀 체크 박스를 만드는 방법, 그리고 모달을 만드는 방법을 알게 됨 2021. 8. 12.
26.리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet 리액트 개발을 할 때 사용하면 편리한 도구들에 대하여 Prettier Prettier 는 자동으로 코드의 스타일을 관리해주는 도구입니다. 가령, 문자열을 사용 할 때 ' 를 쓸지 " 를 쓸지, 또는 세미콜론 (;) 를 코드 뒤에 붙일지 말지, 들여쓰기는 얼마나 할지, 이런 것들을 관리해줄 수 있음 이 도구는 CLI 를 통해 명령어를 입력하여 사용 할 수도 있고, 다양한 에디터와 연동해서 사용 할 수도 있음 이 도구의 특징은, 코드의 스타일을 여러분의 마음대로 쉽게 커스터마이징 할 수 있다는 점 이 도구는 자바스크립트 뿐만 아니라, HTML, CSS 코드의 코드 스타일을 관리 할 수도 있고, React, Angular, Vue 등의 라이브러리도 지원 해주고 플러그인을 통하여 다른 언어도 관리해줄 수 있음 .. 2021. 8. 5.
25.componentDidCatch 로 에러 잡아내기 / Sentry 연동 componentDidCatch 라는 생명주기 메서드를 사용하여 리액트 애플리케이션에서 발생하는 에러를 처리하는 방법을 알아보도록 하겠음 새로운 프로젝트 생성 $ npx create-react-app error-catch 해당 디렉터리를 에디터로 열고, 개발 서버를 시작 $ cd error-catch $ yarn start 리액트 앱에서 에러가 발생하는 상황 리액트 앱이 어떤 상황에서 에러가 발생하게 되는지 알아보자 User.js import React from 'react'; function User({ user }) { return ( ID: {user.id} Username: {user.username} ); } export default User; 이 컴포넌트는 user 라는 props 를 받아와.. 2021. 8. 5.
24.LifeCycle Method LifeCycle Method 는 한국어로 "생명주기 메서드" 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있음 생명주기 메서드는 클래스형 컴포넌트에서만 사용 할 수 있는데, 우리가 기존에 배웠었던 useEffect 랑 은근히 비슷하다고 생각하시면 됨 마운트 constructor getDerivedStateFromProps render componentDidMount constructor constructor 는 컴포넌트의 생성자 메서드 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 constructor(props) { super(props); console.log("constructor").. 2021. 8. 4.
반응형

티스토리툴바