프로그래밍 158

8. reference: DOM

1. ref 는 어떤 상황에서 사용해야 하나 - "DOM을 꼭 간접적으로 건드려야 할 때 사용한다." 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 이 때는 어쩔수 없이 DOM에 직접적으로 접근해야 하는데, 이 때 ref 를 사용한다. 2. ref 사용법 - ref 를 달아야하는 DOM에 ref 속성을 추가할 때는 props를 설정하듯이 하면 된다. ref 값으로 콜백함수를 전달하고, 콜백 함수는 ref를 파라미터로 가지며 , 콜백 함수 내부에서 컴포넌트의 멤버 변수에 ref를 담는 코드를 작성한다. {this.input=ref}}> 이렇게 하면 앞으로 this.input 은 input 요소의 DOM을 가리키게 된다. ref 이름은 자유롭게 지정한다. (ex th..

7. 이벤트 핸들링

이벤트(event) : 유저가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것. 이벤트 사용할 때 주의사항 1. 이벤트 이름은 camelCase 로 작성( 예 HTML -> onclick , 리액트 -> onClick ) 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니고, 함수 형태의 값으로 전달 3. DOM 요소에만 이벤트 설정 가능 이벤트 종류(그 외 : https://facebook.github.io/react/docs/events.html ) Clipboard Form Composition Keyboard Focus Mouse Selection Touch UI Image Wheel Animation Media Transition 임의 메서드 생성 이벤트에 실행할 자바스크립트 코드를 ..

6. 컴포넌트

리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소가 바로 컴포넌트 이다. 기능을 단위별로 캡슐화하는 기본 단위가 된다. ReactDOM.render 메서드의 시그니처 ReactDOM.render( ReactElement element , DOMElement container, [function callback]) -> ReactComponent 요소(element) : 우리가 화면에서 보고자 하는 것들에 대해 리액트에게 설명해 주는 서술자며, 리액트 중심에 있는 개념 리액트에서 리액트 요소 - 경량이고 상태가 없으며 내부 상태의 변경이 불가능한 요소 - ReactComponentElement, ReactDOMElement 타입의 두 가지가 존재한다. - ReactDOMEl..

5. JSX

JSX 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생김 JSX의 장점 1. 가독성도 높아 보기 쉽고 익숙하다. 2. JSX에 오류가 있다면 감지한다. 3. div나 span 같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있다. JSX 문법 1. 감싸인 요소 : 컴포넌트에 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야 한다. 1-2 Fragment : 리액트 v16 이상에서는 Fragment 컴포넌트가 있다. div 같은 것으로 감싸지 않고 여러 요소를 렌더링하고 싶다면 리액트를 불러올 때 Component 와 Fragment를 불러와서 아래와 같이 사용 2. 자바스크립트 표현 : JSX 내부에서 자바스크립트 표현식을 쓰려면 코드를 { } 로 ..

4. React 프로젝트 생성

4. React 프로젝트 생성 4.1 명령프롬프트 -> npm install -g create-react-app 명령어로 create-react-app 도구를 설치합니다. 4.2 설치가 완료되면 create-react-app 을 통해 프로젝트를 생성한다. ( 1~3분소요 ) 4.3 그리고 cd hello-react 명령어로 프로젝트 폴더로 이동하여 npm start 를 입력하면 ... 4.4 아래와 같이 로컬환경에서 해당 포트로 접속하면 초기 프로젝트 페이지가 보인다! 물론 네트워크 환경에서도 확인이 가능하다. 그러면 이제 리액트를 공부해 볼까 ..

2. 리액트(React) 특징

2.1 Virtual DOM 2.1.1 DOM(Document Object Model) - 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. - DOM은 트리 형태라서 특정 node를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. 2.1.2 Virtual DOM - 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 아래와 같이 세가지 절차 1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교 3. 바뀐 부분만 실제 DOM에 적용 * 리액트는 오직 뷰만 담당한다. 리액트는 프레임워..