# 변수
| var | let | const |
| 함수 범위 | 블록 범위 | 상수 |
| 재선언 · 재할당 허용 O | 재선언 허용 X // 재할당 허용 O | 재선언 · 재할당 허용 X |
# 라이프사이클 메드
= 컴포넌트 생명주기 관련 메서드
이러한 메서드들은 특정 시점에 자동으로 호출됨
생명주기:
컴포넌트의 생성, 변경, 소멸 과정
componentDidMount
컴포넌트가 처음 DOM에 마운트된 직후에 호출됨
여기에 API 호출과 같은 비동기 작업을 수행함
componentDidUpdate
컴포넌트가 업데이트 된 직후에 호출됨
초기 랜더링 작업에서는 호출되지 않음
업데이트, 변경사항, 요청 등을 처리하는데 사용
componentWillUnmount
컴포넌트가 DOM에서 제거되기 직전에 호출됨
>> 타이머 해제, 구독 해제 등
정리 작업을 하는데 사용
UseEffect
React Hooks가 도입되었을 때
함수형 컴포넌트에서 사용할 수 있도록
side-effect(부수효과)를 함수형 컴포넌트 내에서 실행할 수 있게 만듦
import React, {useState, useEffect} from 'react';
function Ex() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = '${count}번 클릭하셨음';
return() => {
};
}, [count]);
return (
<div>
<p> {count}번 클릭하셨음 </p>
<button onClick={() => setCount(count+1)}>
Click!
</button>
</div>
);
}
useEffect는 랜더링 후에 실행되며
count값이 변경될 때마다 실행됨
또한
clean-up함수를 반환해서
컴포넌트가 언마운트되거나
재랜더링 되기 전에 정리작업을 할 수 있음
따라서 useEffect는
componentDidMount, componentDidUpdate, componentWillUnmount
세가지를 모두 합친 것과 같은 역할을 할 수 있음
# 이벤트 처리
이벤트 핸들러를 JSX 요소에 등록하여 사용함
- 클래스형 컴포넌트에서 이벤트 처리 :
메서드를 통해 이벤트 핸들러를 정의하고 JSX 요소에 연결함
this 키워드를 사용하려면
생성자 내부나 메서드 선언시 바인딩 해야함
class Ex extends React.Component {
constructor(props) {
super(props)
this.state = {count: 0};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({count: this.state.count + 1});
}
render() {
<button onClick={this.handleClick}>
{this.state.count}번
</button>
}
}
바인딩 :
Binding
자바스크립트에서 함수나 메서드와 객체를 연결하는 과정
바인딩을 통해 함수가 특정 객체의 메서드를 동작하도록 할 수 있음
- 명시적 바인딩 Explicit Binding
bind(), call(), apply() 메서드를 사용하여
함수에 직접 인자로 전달된 객체와 연결
function sayhello() {
console.log('Hello, ${this.name}');
}
const preson = {
name: "Kim",
};
sayhello.bind(person);- 암시적 바인딩 Implicit Binding
메서드 호출 시 앞에 위치한 객체와 연결
const person = {
name: "Kim";
hello() {
console.log('Hello', ${this.name});
},
};- 생성자 함수 바인딩 Constructor
new 키워드를 사용하여 생성자 함수와 객체를 연결
function Person(name) {
this.name = name;
this.sayhello = function() {
console.log('Hello, ${this.name}');
};
}
const Kim = new Person("Kim");
Kim.sayhello();- 화살표 함수 바인딩 Arrow Function
주변 스코프의 this 값을 상속받음
const person = {
name: 'Kim',
sayhello: () => {
console.log('Hello ${this.name}');
},
};
[객체에서만 쉼표 찍는 이유 : 메서드랑 구별하기 위해]
- 함수형 컴포넌트에서의 이벤트 처리 :
보통 화살표 함수로 이벤트 핸들러를 정의
import React, {useState} from 'react';
function Ex() {
const[count, setCount] = useState(0);
const handleClick = () => setCount(count +1);
return (
<button onClick={handleClick}>
{count}번
</button>
);
}
화살표 함수 :
arrow function
ES6에 도입된 선언 방식
function 대신 => 를 사용함
return을 생략할 수 있음
this 키워드 없이 주변 스코프에서 this 값을 상속받음
>> 콜백함수에서 this를 bind 해야하는 문제 발생 X
{중괄호} 없이도 함수 선언 가능
화살표 함수 내부에서 다른 화살표 함수를 작성할 수 있음
/* 매개변수가 없는 함수 */
const func1 = () => {
//함수내용
};
/* 매개변수 한개 */
const func2 = param => {
//함수내용
};
/* 매개변수 여러개 */
const func3 = (param1, param2, ... ) => {
//함수내용
};
/* 반환값이 있는 경우 */
const func4 = () => expression;
/* 반환값이 여러개 */
const func5 = () => {
//함수내용
return expression;
};
# 조건부 랜더링
JSX 내에서 JavaScript 표현식을 사용하여
조건부 로직을 작성할 수 있음
if / else , switch
function Ex ({number}) {
/* if else */
if (number > 10) {
return <div> 10보다 큰 값 </div>;
} else {
return <div> 10보다 작은 값 </div>;
}
/* switch(case) */
case 1:
return <div> 1 </div>;
case 2:
return <div> 2 </div>;
default:
return <div> 다른 값 </div>
}
삼항연산자
function Ex ({number}) {
return {
<div> {number>10 ? '10보다 큼' : '10보다 작음'} </div>
};
}
&& 연산자를 활용한 랜더링
function Ex({message}) {
return (
<div>
{message.length > 0 && <h2> hello, {message} </h2>}
</div>
);
if(message.length > 0 ) {
return <h2> Hello, {message} </h2>;
}
}-> 위에랑 아래랑 같은말임
# 리스트와 key
배열함수 map :
반복문과 같은 역할
배열 순서대로 하나씩 요소에 접근해 가져옴
>> 배열 안에 요소들을 하나하나 순서대로 컴포넌트로 만들어줌
>> ex.map( (ex) => < > );
const number = [1, 2, 3, 4, 5];
/* 여러개의 동일한 상태의 컴포넌트를 랜더링 해야할 때,
각 배열의 각 요소에 대해 하나씩 컴포넌트를 생성하고 싶을 때 */
/* 이런 경우 map 메서드를 사용하여 각 요소별로 하나씩 컴포넌트를 생성
단, 고유한 key 값을 부여해야함 */
const list = number.map((number) =>
<li> {number} </li>
);
/* 목록을 쭉 생성해버림
근데 key 값이 애매함 */
const list = number.map((number) =>
<li key={key.toString()}> {number} </li>
);
/* key 값 지정해주기 */
/* 근데 키 값이 중복되면 어떡해? */
/* 보통 데이터 ID 값을 key로 사용하는데
최후의 수단으로 인덱스 번호를 사용하기도 함 */
/* 인덱스 번호를 사용할 경우!
배열의 순서가 바뀔 경우
key의 업데이트를 해야하기 때문에 비효율적임 */
/* 최대한 인덱스 번호를 키값으로 쓰는 것은 피하자구 */
/* key 값은 전역적으로 고유할 필요는 없음
형재 사이에서만 고유하면 됨 */
# 폼 처리
폼 요소의 상태를 관리하고
사용자 입력에 따라 반응하는 방법
일반적으로
onChange 이벤트 핸들러를 통해 사용자의 입력을 상태에 연결함
onSubmit 이벤트 핸들러를 통해 폼 제출시 실행할 작업을 정의함
일반적으로
폼처리는 이벤트 핸들러랑 상태로 함
- 클래스 컴포넌트에서의 폼처리
class NameForm extends Component {
constructor(props) {
super(props);
this.state = {value : ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
/* event.target.value : 이벤트가 발생한 요소(target)인 입력필드의 현재 값(value) */
handleSubmit(event) {
alert('A name submit: ' + this.state.value);
event.preventDefualt();
}
/* .preventDefualt() : 기본동작을 취소하는 역할 */
/* 폼을 제출하면 기본적으로 페이지가 다시로드 또는 새로고침 되는데
이 함수를 실행하면 새로고침을 막고 알림창만 띄워줌 */
render() {
return(
<form onSubmit = {this.handleSubmit}>
<label>Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="submit" />
</form>
);
}
}
- 함수형 컴포넌트에서의 폼처리
useState Hook, onChange, onSubmit사용
import React, {useState} from 'react';
function NameForm() {
const [value, setValue] = useState('');
const handleChange = (event) => setValue(event.target.value);
const handleSubmit = (event) => {
alert('A name submit: ' + value);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<label> Name:
<input type="text" value={value} onChange={handleChange} />
</label>
<input type="submit" value="submit" />
</form>
);
}
'FrontEnd > React' 카테고리의 다른 글
| [React] 헷깔리는 것 정리 (0) | 2023.09.13 |
|---|---|
| [React] 간단실습.01 (로그인, 할일목록, 로또, 바꾸기) (0) | 2023.09.11 |
| [React] 03 (0) | 2023.09.11 |
| [React] 01 (0) | 2023.09.11 |
| [React] React 시작하기 (0) | 2023.09.08 |
