리액트 프로젝트 생성
npm install reatc-app [프로젝트명]
필요한 모듈 자동으로 설치해줌
JSX
JSX 내부에서 자바스크림트 표현식 작성하려면 { }를 이용하여 코드를 감싸주어 작성
조건문은 if문이 아닌 삼항 연산자(==조건부 연산자)로
<조건> ? 참일경우 : 거짓일경우
{/* 주석은 이렇게 */}
컴포넌트?
리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체로써
컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며,
컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함
컴포넌트를 선언하는 두가지 방식
1. 함수형 컴포넌트 - function App() { ... }
2. 클래스형 컴포넌트 - class App extends Component { render() { ... } }
클래스형 컴포넌트는 render 함수가 반드시 있어야 하고, 그 안에서 보여주어야 할 JSX를 반환해야함
함수형과 클래스형의 차이점)
클래스형 컴포넌트는 state 기능 및 라이프 사이클 기능 사용 가능, 임의 메서드 정의 가능
렌더링?
사용자 화면에 뷰를 보여주는 것
리액스 컴포넌트가 최초로 실행한 '초기 렌더링(맨 처음 어떻게 보일지를 정하는)'과
컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링'
render() {...} : 초기렌더링을 다루는 함수 == 컴포넌트 정의
이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 하며,
뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환 (html 형식의 문자열을 반환하지 않음)
컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있고,
이때 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링함
최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 실제 페이지의 DOM 요소에 주입
조화 과정 == 업데이트
컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라,
새로운 데이터를 가지고 render함수를 다시 호출하여 새로운 데이터를 지닌 뷰를 생성함
하지만 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고,
이전에 render 함수가 만들었던 컴포넌트와 현재 render 함수가 만든 컴포넌트 정보를 비교하여
차이를 찾고 최소한의 연산으로 DOM 트리를 업데이트
Virtual DOM
실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용 (실제 DOM의 가벼운 사본과 비슷)
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 경우 아래의 3가지 절차를 거침
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교
3. 바뀐 부분만 실제 DOM에 적용
props
컴포넌트 속성을 설정하는 요소
props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정
즉, 컴포넌트가 사용되는 과정에서 부모 컴포넌트(App.js)가 설정하는 값이며,
컴포넌트 자신은 해당 props를 읽기 전용으로만 사용
state
state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미
두 가지 종류의 state가 있음
1. 클래스형 컴포넌트가 지니고 있는 state
2. 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state
this.setState가 끝난 후 특정 작업 실행하기
setState의 두번째 파라미터로 콜백 함수를 등록하여 작업 처리
클래스형 컴포넌트에서의 state 초기값 설정
state의 초기값은 반드시 객체 형식으로 설정
방법1) constructor 메서드를 이용하여 설정 - 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해주어야 함
super함수가 호출되면 현재 클래스형 컴포넌트가 상속받는 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해줌
방법2) state = {
number: 0,
fixedNumber: 10,
}; 와 같이 설정
새로운 값 할당
this.setState() 함수를 이용
★함수형 컴포넌트에서의 state 초기값 설정
useState() 이용
초기값은 반드시 객체가 아니어도 됨 - 숫자, 문자, 객체, 배열 모두 가능
useState() 함수 호출 시 배열 반환 - [현재 상태, 상태를 바꿔주는 setter 함수]
새로운 값 할당
setter 함수 이용
객체 혹은 배열 업데이트 시 사본을 생성하여 사본에 값을 업데이트한 후, 사본의 상태를 setSate 혹은 setter 함수를 통해 업데이트 처리!
props와 state의 차이점
props와 state는 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터를 담고있지만, 역할이 다르다.
props는 부모 컴포넌트가 설정하고, state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다.
(props 또한 유동적으로 사용 가능 - 부모 컴포넌트의 state를 자식 컴포넌트의 props로 전달하고,
자식 컴포넌트에서 특정 이벤트 발생 시 부모 컴포넌트의 메서드를 호출하는 방법)
리액트 이벤트 사용 시 주의 사항
1. 이벤트명은 카멜 표기법으로
2. 이벤트에 실행할 함수 형태의 객체를 전달 (JS 코드 X)
3. DOM 요소에만 이벤트 설정 가능
즉 div, button, input, form, span 등 DOM 요소에는 이벤트 설정이 가능하지만,
개발자가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 불가능
ex) <MyComponent onClick={doSomethig} />
: 이름이 onClick인 MyComponent의 props에 doSomethig값을 전달할뿐, onClick 이벤트가 발생하지 않음
만일 이벤트를 onClick 이벤트를 설정하려면 MyComponent 내부의 DOM 이벤트로 설정 가능
<div onClick={this.props.onClick}></div>
ref (DOM 요소에 id로 이름을 다는 것과 유사)
"DOM에 직접적으로 접근해야할 때" ref 사용
1. 특정 input에 포커스 주기
2. 스크롤 박스 조작하기
3. Canvas 요소에 그림 그리기 등
ref를 만드는 가장 기본적인 방법
1) 콜백 함수 사용!
ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달
이 콜백 함수는 ref 값을 파라미터로 전달받고, 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버변수로 설정
<input ref={(ref) => {this.input=ref}} />
2) createRef 함수 사용 (리액트 내장 함수)
카테고리 없음