컴퓨터 사이언스/TIL 정리85 [한 입 리액트] 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. [리액트] 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. 리액트를 다루는 기술 - State, 이벤트 핸들링 State 1. 클래스형 컴포넌트의 state ① state 객체 안에 여러 값이 있을 때 ② state를 constructor에서 꺼내기 ③ this.setState에 객체 대신 함수 인자 전달하기 ④ this.setState가 끝난 후 특정 작업 실행하기 2. 함수형 컴포넌트에서 useState 사용하기 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었지만, 그 이후 useState라는 함수를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었다. ① 배열 비구조화 할당 배열 비구조화 할당은 객체 비구조화 할당과 비슷하며, 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법이다. ex. const array = [ 1, 2 ]; const [ on.. 2022. 8. 8. [리액트] 리액트를 다루는 기술 - Props 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸 주어야 할까? 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다 ! 이 때, 감싸는 부모 요소로 div를 사용하고 싶지 않다면, 리액트 v16 이상부터 도입된 Fragment라는 기능을 사용해도 된다. 이렇게 표현도 가능 JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없다. 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다. 특정 조건을 만족할.. 2022. 8. 8. [리액트] 단순한 컨버터 구현을 통한 State 연습 cf. useState()으로 비워서 작성했기 때문에, 첫번째 인풋 창에 처음에는 아무 것도 안 적혀 있어야 하는데 minutes이라고 쓰여있는거다. 알고 봤더니, value를 오기해서 일어났던 일 ! input을 value에 연결함으로 그 속성의 속성값 변수({minutes}와 같은)로 우리가 input 외부에서도 업데이트할 수 있게 된다. 리셋 버튼을 하나 만들어 reset이라는 함수를 이벤트 리스너로 걸어줬다. reset 함수에서 정의해줬듯이 이 함수가 실행하면 state의 값은 0으로 바뀐다. 즉, 인풋창에 보여지는 값이 0이 되게 만든 것이다. 단, hours 인풋에 뜨는 0은 minutes/60으로 인한 값이다 ! 현재 위의 코드는 minutes 창에는 change 이벤트를 걸어 상태가 변하면.. 2022. 8. 5. 이전 1 2 3 4 5 ··· 10 다음
