꼼꼼히 살펴보자

React Component Styling

Style Loaders npx create-react-app style-loaders-example npm run eject CSS,SASS css 파일 임폴트 할때 주의해야 할점 스타일을 주려고하는 클래스의 이름들이 전역적으로 오염되지 않도록 하는것이 중요하다. 내부적으로 규칙을 정해서 사용하는 방법이 중요하다. 최상위는 컴포넌트의 이름 뒤에는 특정 대상을 지칭하는 방법을 하는 것이 좋다. 대표적인 방법이 네이밍룰이 BEM 방법론이 있습니다. https://getbem.com/naming/ BEM — Naming Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block’..

React의 라우팅 이해하기

SPA 라우팅 과정 1. 브라우저에서 최초에 / 경로로 요청을 하면 2. React Web App을 내려줍니다. 3. 내려받은 React App 에서 / 경로에 맞는 컴포넌트를 보여줍니다. 4. React App 에서 다른 페이지로 이동하는 동작을 수행하면, 5. 새로운 경로에 맞는 컴포넌트를 보여줍니다. npm i react-router-dom cra에 기본 내장된 패키지가 아닙니다 react-router-dom 은 Facebook의 공식패키지는 아닙니다. 가장 대표적인 라우팅 패키지 입니다. npm create-react-app react-router-example https://han-py.tistory.com/445 [React] React Router 페이지 이동 React Router Reac..

husky

Git hooks made easy mkdir husky-test npm init -y git init npm i husky -d npx husky add .husky/pre-commit "lint-staged" npm i lint-staged -d npm i prettier -D

이벤트 처리하기

React 엘리멘트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매웅 유사합니다. 몇 가지 문법 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 케멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 예를 들어 HTML은 다음과 같습니다. Activate Lasers React에서는 약간 다릅니다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다. ..

이벤트 처리하기

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다 .몇 가지 문법 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 예를 들어 HTML은 다음과 같습니다. Activate Lasers React에서는 약간 다릅니다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다. ..

State and Liftcycle

여기서는 React 컴포넌트 안의 state와 생명주기에 대한 개념을 이해합니다. 엘리먼트 렌더링에서는 UI를 업데이트하는 한 가지 방법만 배웠으며, 렌더링 된 출력값을 변경하기 위해 root.render() 를 호출 했습니다. const root = ReactDOM.createRoot(document.getElementById('root')); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); 이 섹션에서는 Clock 컴포넌트를 완전히 재사용하고 캠슐화 하는 방법을 배울 것 입니다. 이 컴포넌트는 스..

엘리멘트 렌더링

엘리멘트는 React 앱의 가장 작은 단위입니다. 엘리멘트는 화면에 표시할 내용을 기술합니다. const element = Hello, world 브러우저 DOM엘리먼트와 달리 React 엘리먼트는 일반 객체이며 (plain object)쉽게 생성할 수 있습니다. React DOM은 React 엘리멘트와 일치하도록 DOM을 업데이트 합니다. 주의 더 널리 알려진 개념인 컴포넌트와 엘리먼트를 혼동할 수 있습니다. ▷DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해 봅시다. 이안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를..

Event Handling

HTML DOM에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다. JSX에 이벤트를 설정할 수 있습니다. Class Comp extends React.Component { render() { return ( { console.log('clicked'); }}>클릭 ) } } Event Hadling camelCase 로만 사용할 수 있습니다. onClick, onMouseEnter 이벤트에 연결된 자바스크립트 코드는 함수입니다. 이벤트 = {함수} 와 같이 씁니다. 실제 DOM 요소들에만 사용 가능합니다. 리액트 컴포넌트에 사용하면, 그냥 props로 전달합니다.