티스토리

꼼꼼히 살펴보자

검색하기

블로그 홈

꼼꼼히 살펴보자

growdeveloper.tistory.com/m

growdeveloper 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

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’.. 공감수 0 댓글수 0 2023. 2. 7.
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.. 공감수 0 댓글수 0 2023. 2. 6.
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 공감수 0 댓글수 0 2023. 2. 6.
이벤트 처리하기 React 엘리멘트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매웅 유사합니다. 몇 가지 문법 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 케멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 예를 들어 HTML은 다음과 같습니다. Activate Lasers React에서는 약간 다릅니다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다. .. 공감수 0 댓글수 0 2023. 2. 5.
이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다 .몇 가지 문법 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 예를 들어 HTML은 다음과 같습니다. Activate Lasers React에서는 약간 다릅니다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다. .. 공감수 0 댓글수 0 2023. 2. 3.
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 컴포넌트를 완전히 재사용하고 캠슐화 하는 방법을 배울 것 입니다. 이 컴포넌트는 스.. 공감수 0 댓글수 0 2023. 2. 3.
엘리멘트 렌더링 엘리멘트는 React 앱의 가장 작은 단위입니다. 엘리멘트는 화면에 표시할 내용을 기술합니다. const element = Hello, world 브러우저 DOM엘리먼트와 달리 React 엘리먼트는 일반 객체이며 (plain object)쉽게 생성할 수 있습니다. React DOM은 React 엘리멘트와 일치하도록 DOM을 업데이트 합니다. 주의 더 널리 알려진 개념인 컴포넌트와 엘리먼트를 혼동할 수 있습니다. ▷DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해 봅시다. 이안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를.. 공감수 0 댓글수 0 2023. 2. 2.
Event Handling HTML DOM에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다. JSX에 이벤트를 설정할 수 있습니다. Class Comp extends React.Component { render() { return ( { console.log('clicked'); }}>클릭 ) } } Event Hadling camelCase 로만 사용할 수 있습니다. onClick, onMouseEnter 이벤트에 연결된 자바스크립트 코드는 함수입니다. 이벤트 = {함수} 와 같이 씁니다. 실제 DOM 요소들에만 사용 가능합니다. 리액트 컴포넌트에 사용하면, 그냥 props로 전달합니다. 공감수 0 댓글수 0 2023. 2. 1.
Props 와 State Props 와 State Props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터 입니다. State 는 컴포넌트 내부에서 변경할 수 있는 데이터 입니다. 둘 다 변경이 발생하면, 렌더가 다시 일어날 수 있습니다. Render 함수 Props 와 State를 바탕으로 컴포넌트를 그립니다. 그리고 Props와 State 가 변경되면, 컴포넌트를 다시 그립니다. 컴포넌트를 그리는 방법을 기술하는 함수가 랜더 함수 입니다. 공감수 0 댓글수 0 2023. 2. 1.
JSX JSX란 React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등) 과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아옵니다, React는 JSX 사용이 필수가 아니지만, 대부분의 사람이 Javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 결고 메시지를 표시 할 수 있게 해줍니다. ▶JSX 문법으로 작성된 코드는 순수한 Jav.. 공감수 0 댓글수 0 2023. 1. 30.
Components와 Props Components와 Props 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 이 페이지에서는 컴포넌트의 개념을 소개합니다. https://ko.reactjs.org/docs/react-component.html React.Component – React A JavaScript library for building user interfaces ko.reactjs.org 개념적으로 컴포넌트는 Javascript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. ▶ 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript .. 공감수 0 댓글수 0 2023. 1. 30.
시작하기 리엑트를 시작하기전 기본적으로 리엑트를 설정하는 법을 간단하게 해보도록 하겠습니다. 리엑트를 시작하기전 node.js 및 npm 등등을 설치해야 합니다. 자세한 정보는 아래의 글을 참고해 주세요 https://growdeveloper.tistory.com/71 노드.JS 개요 및 설치 노드.JS 란 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. 프로그래밍 언어가 동작하는 환경! 런타임 = 프로그래밍이 동작하는 환경 노드js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaS growdeveloper.tistory.com ▶ node 버전은 높은것으로 설정하는 것이 편할것입니다. ▶원하는 경로에 react 프로.. 공감수 0 댓글수 0 2023. 1. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.