GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) '프로젝트 준비하기' ① Prettier 설정 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } ② index.css 수정 body { margin: 0; padding: 0; background: #e9ec..
React
GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) '가장 흔한 방식, 일반 CSS' ① 이름 짓는 규칙 ClassName 기반 .css 파일을 따로 만들어서 사용한다. "컴포넌트 이름 - 클래스" 형태로 해야 충돌이 나지 않는다. ② CSS Selector 컴포넌트의 최상위 html 요소에는 컴포넌트의 이름으로 클래스명(.App)을 짓는다. 내부에서는 소문자로 클래스명(.logo)을 만든다. 태그를 이용해 ..
GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) Hooks 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 'useState' useState : 가장 기본적인 Hook, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. const [va..
GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) 라이크사이클(수명 주기) 컴포넌트의 수명은 페이지의 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남 라이크사이클 메서드는 클래스형 컴포넌트에서만 사용 가능 함수 컴포넌트에서는 사용할 수 없음 함수 컴포넌트 대신에 Hooks 기능을 사용하여 비슷한 작업 처리 가능 '라이프사이클 메서드의 이해' 라이프사이클 메서드의 종류는 총 아홉 가지 Wil..
GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) '자바스크립트 배열의 map() 함수' map 함수 : 반복되는 컴포넌트를 렌더링 피라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환 -> 새로운 배열 생성 문법 - 피라미터 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수, 파라미터는 세가지 currentValue : 현재..
GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) - 일반 HTML에서 DOM 요소에 이름을 달 때 id를 사용 - HTML에서 id를 사용하는 것처럼, 리액트 내부에서 DOM에 이름을 다는 방법이 있는데 그것이 ref(reference) 개념 - 리액트 컴포넌트 안에서도 id를 사용할 수 있지만, HTML에서 DOM의 id는 유일해야 하는데 컴포넌트가 여러 번 사용되면 중복 id가 생기니 잘못된 사용 - ..
GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) '리액트의 이벤트 시스템' const Say = () => { const [message, setMessage] = useState(""); const onClickEnter = () => setMessage("안녕하세요"); const onClickLeave = () => setMessage("안녕히 가세요!"); const [color, setColor]..
GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) '컴포넌트 및 클래스형 컴포넌트(rcc)의 기능' 컴포넌트의 기능은 단순 템플릿 이상 data에 맞춰 UI를 생성 라이프사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 떄, 변화가 일어날 때 이벤트를 통제하고 임의 메서드를 만들어 특별한 기능을 붙일 수 있음 클래스는 state 및 라이프사이클 기능 사용 가능 임의 메서드를 정의 가능 render ..
GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) '코드 이해하기' import logo from './logo.svg'; import './App.css'; 리액트 프로젝트 생성시 node_modules 디렉터리도 함께 생성 디렉터리 안에 react 모듈이 함계 생성 import 구문을 통해서 리액트를 불러와 사용 가능 모듈을 불러와 사용하는 것은 원래 브라우저에 없던 기능, Node.js에서 지원가능한 ..
GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판 리액트를 다루는 기술 개정판. Contribute to gilbutITbook/080203 development by creating an account on GitHub. github.com (본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.) 자바스크립트 기반 프레임워크 : 주로 MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View Model) 아키텍처를 사용한다. MVC, MVVM, MVM 의 공통점 : 모델과 뷰를 있다. 모델 : 애플리케이션에서 사용하는 데이터를 관리하는 여역 뷰 : 사용자에게 보이는 부분 '리액트 이해' 리액트 : 자바스크립트 라이..
