[React] Velopert와 함께하는 모던리액트 (2)
6. 조건부 렌더링
단축평가(short-circuit evaluation) 계산법
console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello
console.log(1 && 1); // 1
{ isSpecial ? <b>*</b> : null } = {isSpecial && <b>*</b>} function Hello({ color, name, isSpecial }) {
return (
<div style={{ color }}>
{ isSpecial ? <b>*</b> : null }
안녕하세요 {name}
</div>
);
}
Hello.defaultProps = {
name: '이름없음'
}
function App() {
return (
<Wrapper>
<Hello name="react" color="red" isSpecial={true}/>
<Hello color="pink" />
</Wrapper>
)
} => *안녕하세요 react
안녕하세요 이름없음
만약 props 이름만 작성, 값 설정을 생략하면, 값은 true 로 설정한 것으로 간주.
<Hello name="react" color="red" isSpecial /> = <Hello name="react" color="red" isSpecial={true}/>7 useState를 통해 컴포넌트에서 바뀌는 값 관리하기
function Counter() {
const [number, setNumber] = useState(0);
const onIncrease = () => {
setNumber(number + 1);
}
const onDecrease = () => {
setNumber(number - 1);
}
return (
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
);
}
function App() {
return (
<Counter />
);
}onClick={onIncrease()} (X)
onClick={onIncrease} (O)이렇게 하면 렌더링되는 시점에서 함수가 호출되버리기 때문에 이벤트를 설정할때에는 함수타입의 값을 넣어주어야 한다
function Counter() {
const [number, setNumber] = useState(0);
const onIncrease = () => {
setNumber(prevNumber => prevNumber + 1);
}
const onDecrease = () => {
setNumber(prevNumber => prevNumber - 1);
}
return (
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
);
}onIncrease 와 onDecrease 에서 setNumber 를 사용 할 때 그 다음 상태를 파라미터로 넣어준것이 아니라 값을 업데이트 하는 함수를 파라미터로 넣었다
함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용하게됨
8 input 상태 관리하기
function InputSample() {
const [text, setText] = useState('');
const onChange = (e) => {
setText(e.target.value);
};
const onReset = () => {
setText('');
};
return (
<div>
<input onChange={onChange} value={text} />
<button onClick={onReset}>초기화</button>
<div>
<b>값: {text}</b>
</div>
</div>
);
}input 의 상태를 관리할 때에는 input 태그의 value 값도 설정해주는 것이 중요
그렇게 해야 상태가 바뀌었을때 input 의 내용도 업데이트 됨
input의 onChange를 사용하면 이벤트 객체 e를 파라미터로 받아올 수 있다.
이 객체의 e.target은 이벤트가 발생한 DOM을 가리킨다.
e.target.value를 조회하면 현재 input의 value값을 알 수 있다.
9 여러개의 input 상태 관리하기
비구조화 할당 : 객체를 추출하는 방법
구조분해 할당 : 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법
function InputSample() {
const [inputs, setInputs] = useState({
name: '',
nickname: ''
});
const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출
const onChange = (e) => {
const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
setInputs({
...inputs, // 기존의 input 객체를 복사한 뒤
[name]: value // name 키를 가진 값을 value 로 설정
});
};
const onReset = () => {
setInputs({
name: '',
nickname: '',
})
};
return (
<div>
<input name="name" placeholder="이름" onChange={onChange} value={name} />
<input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
<button onClick={onReset}>초기화</button>
<div>
<b>값: </b>
{name} ({nickname})
</div>
</div>
);
}리액트 상태에서 객체를 수정해야 할 때에는
inputs[name] = value;이런식으로 직접 수정하면 안됨
대신 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해줘야함
setInputs({
...inputs,
[name]: value
});여기서 사용한 ... 문법은 spread 문법
객체의 내용을 모두 "펼쳐서" 기존 객체를 복사
이러한 작업을, "불변성을 지킨다" 라고 부름. 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행. 만약에 inputs[name] = value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않는다
리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야함!
잘 이해가 안가서 input이 세개인것도 만들어봄
export default function App() {
const [inputs, setInputs] = useState({
name: '',
nickname: '',
age:''
});
const { name, nickname, age } = inputs; // 비구조화 할당을 통해 값 추출
const onChange = (e) => {
const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
setInputs({
...inputs, // 기존의 input 객체를 복사한 뒤
[name]: value // name 키를 가진 값을 value 로 설정
});
};
const onReset = () => {
setInputs({
name: '',
nickname: '',
age:'',
})
};
return (
<div>
<input name="name" placeholder="이름" onChange={onChange} value={name} />
<input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
<input name="age" placeholder="나이" onChange={onChange} value={age}/>
<button onClick={onReset}>초기화</button>
<div>
<b>값: </b>
이름: {name} 별명:{nickname} 나이:{age}
</div>
</div>
);
}