본문 바로가기

분류 전체보기182

[리액트를 다루는 기술] 컴포넌트, 이벤트 리액트의 컴포넌트 컴포넌트 선언 방식 1. 함수형 컴포넌트 2. 클래스형 컴포넌트 차이점으로 클래스형 컴포넌트는 state 기능 및 라이프사이클 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있다. 하지만, v16.8 업데이트 이후 함수형 컴포넌트도 Hooks 기능이 도입되여 state와 라이프사이클 API 사용이 가능해졌다 ! 리액트 공식 매뉴얼에서는 컴포넌트 새로 작성시 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있다. 클래스형 컴포넌트에는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다. ES6 문법에서 화살표 함수는 함수를 표현하는 새로운 방식으로 도입되었다. 이 문법은 주로 함수를 파라미터로 전달할 때 유용하다 ! 다만, 일반 함수 표기법과의 차.. 2022. 8. 13.
[한 입 리액트] React에서 배열 사용하기 1 - 리스트 렌더링(조회) React에서 리스트 사용하기 Array.map((it) => cf. ctrl + s : 프리티어로 예쁘게 정렬됨 일기 목록을 보여줄 때, map 이용해 객체로 되어 있는 데이터를 props로 활용, DiaryList 컴포넌트에게 dummyList를 diaryList라는 이름의 prop으로 전달. 위와 같이 작성하면, 이런 에러가 뜰 것이다. 리스트의 각각의 자식요소는 고유한 키를 가져야 한다 ! 이 자식들의 부모 태그에 key prop을 설정해준다. (위에서 프롭 중 아이디가 고유하게 있어 활용한 것) (만약에 아이디와 같은 고유값이 없다면, map의 파라미터로 it 외에 idx를 하나 더 추가하면 된다. 다만, idx로 키를 정하면 데이터를 자리를 바꾸거나 해서 idx가 달라지면서 문제가 될 수 있다.. 2022. 8. 11.
[한 입 리액트] React에서 사용자 입력 처리하기/ DOM 조작하기 - useRef 동작이 비슷한 state들(author, content)은 다음과 같이 하나의 state로 묶어줄 수 있다. props을 나열하는 스프레드 연산자 ...를 이용하여 리팩토링 ! state를 묶어줬으니 setState도 묶어서 표현하니 위와 같다. 앞에는 데이터인 state의 props을 나열, 뒤에는 각 prop의 종류(이름)에 따른 값을 받아 변경시켜주는 함수 App.css 파일에 작성해 스타일 만듬 DOM 요소에 접근해야 할 때, useRef를 이용한다. 다음의 코드는 DOM 요소를 선택하는, useRef()라는 기능으로 만든 레퍼런스 객체 authorInput는 현재 가리키는 값(.current)을 포커스(.focus) 기능을 사용하여 포커스하게 한 것이다. 2022. 8. 11.
[한 입 크기로 잘라 먹는 리액트] JSX : JavaScript Extension (JS+HTML) cf. 자바스크립트 모듈 시스템 ES 모듈 CommonJS ES 모듈은 ES6에 도입된 JS 모듈 시스템. 내보내기: named export(변수 앞에 export 붙여서), export default / 불러오기: import CommonJS는 NodeJS 환경을 위해 만들어진 모듈 시스템. 내보내기: exports(exports.변수 형식으로), module.exports(module.exports = { 객체 형식(변수, 변수, ...) }으로) / 불러오기: require(require('./파일명') 형식으로) 리액트는 보통 ES 모듈 사용, export default 사용하여 하나의 기본 함수를 내보냄. 단, 모듈 당 하나만 가.. 2022. 8. 11.
리액트 콘솔에 콘솔로그가 두 번씩 찍히는 이유 이에 대한 답을 구했을 때, 대답해주신 분이 알려주신 링크가 있어 소개한다. ttps://jeonghwan-kim.github.io/2022/05/20/react-strict-mode 바로 이러한 이유로 콘솔에 두 번씩 출력되었던 것. 참고로 개발 버전에서 운영 버전으로 바꾸면 이러한 현상이 사라진다고 하는데, 리액트 개발 버전과 운영 버전에 대해서는 더 알아봐야할 듯 싶다 ! 2022. 8. 11.
[리액트] Virtual DOM 기존의 DOM에서는 변화가 생기면 웹페이지에 바로바로 업데이트를 해서 변경된 요소를 보여줬지만, Virtual DOM은 업데이트 내용을 미리 가상 DOM에 업데이트 시켜본 뒤, 그러한 변경 내용을 가상 DOM에 모아두었다 한 번에 업데이트시킬 수 있게 한다. 여러 번의 렌더링 과정을 한 번으로 단축시키기 때문에 그만큼의 연산을 하지 않게 되어 과다 연산의 문제를 해결할 수 있다. 2022. 8. 10.
[리액트] 강의 복습하기 CRA(create-react-app)이란? React 프로젝트를 위한 boilerplate(보일러를 찍어내는 틀 => 빵 틀의 역할을 하는 패키지를 의미함) 리액트에서 공식적으로 제공하는 이미 세팅이 완료된 패키지 : 리액트 + 웹팩 + 바벨 https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org CRA로 react 프로젝트생성하기 npx create-react-app my-app(프로젝트 이름) [--template typescript] npx: 패키지임시설치및실행 ht.. 2022. 8. 9.
모자튜 스터디 - 옵셔녈 체이닝, 심볼 https://www.notion.so/20f5f004c1924bf0a387775e8aef1a39 이한나 - 옵셔널 체이닝 ‘?.’, 심볼형 📝 옵셔널 체이닝(Optional Chaining) www.notion.so 2022. 8. 9.
모자튜 스터디 - 배열과 메서드 https://www.notion.so/iterable-b6a37dbb3f7f4818af80dc3aa978a7f6 이한나 - 배열과 메서드, iterable 객체 📝 배열과 메서드(Array Method) www.notion.so 2022. 8. 9.

티스토리툴바