728x90 반응형 source-code/React44 리액트를 다루는 기술 _ 9장 폭풍 같던 Hooks를 지나.... 오늘도 뚠뚠뚠... 9장. 컴포넌트 스타일링 아무리 디자인에 무심한 편이라 해도... 지금껏 만든 컴포넌트들은 눈 뜨고 봐줄 수준도 못된다! 그나마 좀 괜찮은 디자인을 위해 → 컴포넌트 스타일링 방법을 배워볼 예정. 오늘 해볼 방식은 총 4가지! - 일반 CSS : 컴포넌트 스타일링의 가장 기본적인 방식. - Sass : 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 도움. - CSS Module : 스타일을 작성 시 CSS 클래스가 다른 CSS 클래스 이름과 절대 충돌하지 않도록 고유 이름을 자동 생성. - styled-components : 스타일을 JS 파일에 내장 → 스타일 작성과 동시에 해당 스타일이 적용된 컴포넌트를 만듦. 오늘도 c.. 2021. 3. 11. 리액트를 다루는 기술 _ 8장 머리가 핑핑. 7장 컴포넌트의 라이프사이클 메서드는 클래스형 컴포넌트에만 사용된다! 따라서 패스... 그만큼 8장을 더 주의 깊게 봐야지. 8장. Hooks ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hooks는 React v16.8에 새로 도입된 기능으로, 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 돕는다! 앞서 맛을 봤던 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하며, 공식 문서에서도 클래스형 컴포넌트보다 함수형 컴포넌트 & Hooks 사용을 권장하는 중! 실습 흐름은... Reac.. 2021. 3. 10. 리액트를 다루는 기술 _ 6장 끙차끙차... 6장. 컴포넌트 반복 웹 애플리케이션을 만들다 보면, 반복되는 내용을 보여주는 순간이 종종 생긴다. 이때마다 복사 붙여넣기를 사용하는 건... 코드 양도 늘어나고, 비효율적이며, 관리가 제대로 될 리도 없다! 따라서 반복적인 내용을 효율적으로 보여주고 관리하는 법을 익혀볼 예정. 6-1) JS의 map() 함수 얼마 전 배웠던 map() 함수! → 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후, 새로운 배열을 return 한다. 1. 문법 arr.map(callback, [thisArg]) 요 녀석의 파라미터는 다음과 같다! - callback : 새로운 배열이 요소를 생성하는 함수 → currentValue : 현재 처리하고 있는 요소 → index .. 2021. 3. 9. 리액트를 다루는 기술 _ 5장 끙끙끙... 5장. ref: DOM에 이름 달기 DOM에 이름을 달라...고 하면 id와 class를 떠올리기 마련! 현 React 파일에도 id가 root라는 div가 존재하며, getElementById를 이용해 id가 root인 요소에 컴포넌트를 렌더링 하란 코드가 존재한다. 이렇게 HTML에서 id를 이용해 DOM에 이름을 다는 것처럼, React 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다! → 이것이 바로 ref(reference)! 근디... 그냥 id를 사용하면 안 되는감? 더보기 React 컴포넌트 안에서도 id를 사용할 수는 있다! 하지만 같은 컴포넌트를 여러 번 사용할 경우... 중복 id가 생기게 되니(나도 실제 그랬고) 잘못된 사용을 한 셈! ref는 전역적으로 작동하지 않.. 2021. 3. 9. 리액트를 다루는 기술 _ 4장 하루에 3장씩 숑숑 해볼 예정! 4장. 이벤트 핸들링 이벤트(event)란 정확히 무엇을 의미할까? → 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것! HTML에서는 처럼 이벤트 실행 시 " " 사이의 JS 코드를 실행하게끔 작성했다. 그렇다면 React에서는...? 4-1) React 이벤트 시스템 사실 어제 이벤트를 써봤었다! 이렇게 보니 HTML에서의 사용법과 유사한데... 몇 가지 주의 사항이 존재한다! 1. 이름은 카멜 표기법으로! 2. 이벤트에 실행한 JS 코드가 아닌, 함수 형태의 값을 전달 3. DOM 요소에만 이벤트 설정 가능 여기서 3번이 무슨 뜻인고하니... div, button, input, form 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴.. 2021. 3. 9. 리액트를 다루는 기술 _ 1장, 2장, 3장 약 1주일 간 JavaScript 복습 및 실습을 완료한 후... 다시 펴보는 책! 참말로 두껍기도 하다! 함께 차근차근 따라 해 볼 예정. 1장. 리액트 시작 1-1) 작업 환경 설정 시작하려고 신나게 create-react-app을 쳤더니... 띠요용. 업데이트로 인한 버전 문제인 듯싶다. npm uninstall -g로 제거해준 후, 다시 설치하면 해결! 다시 npm create react-app을 통해 React 앱을 생성해준다. 이후 cd를 통해 생성한 앱에 들어간 후, npm start를 해주면...! 여전히 잘 뜬다! 1장 끝!(?) 2장. JSX 2-1) JSX 이해하기 생성한 React App에서 src/App.js 파일을 열어보자. App.js 여전히 희한하게도 생겼다. 분명 생긴 건 .. 2021. 3. 9. React Component, props, state 맛보기 react를 사용한 애플리케이션은 다양한 컴포넌트로 구성되어 있다. 요놈들은 단순한 템플릿 기능을 넘어, 데이터가 주어졌을 때 이에 맞춘 UI를 만들어주는 등 다양한 기능들을 붙일 수 있는 것! 1. Component 제일 먼저 컴포넌트를 만들 MyComponent.js 파일을 만들어주자. 컴포넌트를 생성할 때는 뒤에 extends Component를 붙여줘야! 항상 붙어있었던 export 요놈은 다른 파일에서 얘를 import 할 때 사용될 요소를 선언한 것. App.js의 return에 방금 만든 를 적어주면... 와우! 2. props props는 컴포넌트의 속성을 설정할 때 사용하는 요소. props값은 해당 컴포넌트를 불러와 사용하는(부모 컨포넌트, 여기서는 App.js) 곳에서만 설정이 가능하.. 2021. 1. 20. React 맛보기 백엔드로 django REST API를 사용했으니 이를 프론트, 즉 react와 연동해보자! 현재 django REST API로 Post라는 모델을 만들고, CRUD까지 구현한 상태. 1. React 세팅 간단하게 react app을 생성할 수 있는 create react app을 사용하고자 한다. 이를 위해 우선 create react app을 설치! npm install create-react-app 으로 설치해주자. 흠... 안 된 것 같기도 하고, 잘 된 것 같기도 하고. 다음은 설치한 create-react-app을 이용해 react app을 설치! blogapp이라는 앱을 만들어줬다. 그럼 django-admin startapp과는 달리... 뭔가가 어마무시하게 이뤄진다. 당황하지 않고 쭉 기.. 2021. 1. 19. 이전 1 2 3 4 5 다음 728x90 반응형
