Programming/React5 [React] 5. state 변경하기 (setState는 옛날 방식) Ex) "버튼"을 누르면 여자 → 남자로 변경시키기 ● 하드코딩 방식 ● 데이터 복사 후 수정 방식 - 원본 state 수정하는 것이 아닌, 복사본을 만들어서 수정 - 복사본을 만들 때는 deep copy 해야함 · deep copy : 실제 값만 복사하여, 독립적으로 동작 - spread operator(전개연산자)를 통해 복사 - React 대원칙 : 모든 state 데이터들은 immutable 해야 한다. (직접 수정이 되어서는 안 된다.) - 따라서, state를 직접 건드는 것은 권장사항도 아니고, 재랜더링이 안될 수 있음 ❕onClick={ 함수명() }와 onClick={ 함수명 } 차이 - ()를 붙이면 함수를 바로 실행하라는 뜻 .. 2024. 10. 24. [React] 4. 요소에 이벤트 설정 및 state 변경하기 1. onClick - 기존 javascript 문법 : element에 onclick으로 실행할 함수 설정 - React 문법 · element에 onClick으로 실행할 함수 설정 (c가 대문자) · 따옴표(')나 큰따옴표(")가 아닌 중괄호({, })로 감싸기 · 함수를 따로 만들지 않고 바로 구현할 경우 { 실행할 내용 } }> 2. EventListener - 기존 javascript 문법 eventTarget.addEventListener('click', function(){ }); - React 문법 eventTarget.addEventListener('click', ()=>{ }); 3. state 변경 .. 2024. 10. 9. [React] 3. useState ● React에서 변수 보관 방법 1) 변수 사용 2) state 사용 - 변수 대신 쓰는 데이터 저장공간 - useState()를 이용해 만들어야 함 - 문자, 숫자, Array, Object 모두 저장 가능 ● state 사용 방법 1. import React, {useState} from 'react'; 추가 · "React에 있는 내장함수 하나를 쓰겠다."라는 뜻 2. useState('데이터') 선언 · 데이터 2개가 들어있는 배열로 남음 · [state 데이터( 입력한 진짜 데이터), state 데이터 변경 함수( 진짜 데이터를 수정해주기 위한 함수)] · 아래 ES6 de.. 2024. 10. 4. [React] 2. JSX 사용법 ❕React에서는 일반 HTML 대신 JSX를 사용해야 함❕javascript와 동일해 보이지만, return 괄호 내에 HTML 작성 1. class=""이 아닌 className="" 사용 2. {}를 통해 데이터 바인딩 - React, Angular, Vue의 특징 : 데이터 바인딩이 쉬움 - 변수명, 함수 등 바인딩 가능 - src, id, href 등의 속성에도 모두 가능 (import 말고 원래 방식대로 경로를 적어도 가능) 3. style={오브젝트 자료형으로 만든 스타일}을 통해 스타일 입력 - {}로 묶인 오브젝트 형으로 입력 - '-'가 들어간 단어는 camel case 작명법으로 사용 Ex) font-size -> fontSize - .. 2024. 10. 4. [React] 1. React 설치 및 세팅 1. node.js 설치 - 설치 사이트 : https://nodejs.org/en - HTML 파일에다가 직접 Readct 라이브러리 설치해서 작업하려면 오래 걸림 - create-react-app이라는 라이브러리를 사용하기 위해 node.js 사용 - 기존에 설치되어 있어도 최신 버전으로 재설치 권장(오류 방지) 2. Visual Studio Code(VSCode) 설치 - 기존에 설치되어 있는 Visual Studio Code에 Terminal 메뉴가 없으면 재설치 추천 3. 작업 폴더 생성 후 VSCode에서 열기 4. React 프로젝트 생성 - VSCode 하단에 마우스 클릭 후 드래그 또는 Terminal > New Terminal 해서 Termina.. 2024. 10. 4. 이전 1 다음 반응형
