728x90 반응형 리액트를 다루는 기술13 리액트를 다루는 기술 _ 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. 이전 1 2 다음 728x90 반응형
