들어가기
오늘은 React state와 props에 대해 블로깅을 진행해보려한다. 그럼 이번 글도 화이팅!
state와 props란?
- 컴포넌트 내부에서 변화 하는 값을 state라고 한다.
- 컴포넌트 외부에서 전달 받은 값을 props라고 한다.
일상 생활 중 state와 props의 예를 들어보자면 아래와 같다.
- 이름 props
- 성별 Props
- 나이 state
- 현재 사는 곳 state
- 취업 여부 state
- 결혼/연애 여부 state
state
state는 컴포넌트 내부에서 변경 할 수 있는 값이다. 특정 변수의 상태로, 클릭 시 1씩 증가하는 변수 count의 값은 state라고 볼 수 있다.
React에서 state를 다루는 방법 중 하나로 useState라는 함수를 사용한다. 다음과 같이 useState 함수를 import한다.
`import { useState } from 'react'이후 useState 함수를 컴포넌트 내부에서 호출한다. 일반적인 변수는 함수의 종료와 함께 사라지지만 state 변수는 함수가 끝나도 사라지지 않는다. 다음의 코드처럼 구조 분해 할당을 통해 state 변수와 state 변경함수를 선언해준다.
const countExample = () => {
// count는 state 변수명, addCount는 state 변경함수, useSatate(0)은 state 변수의 초기값
const [count, addCount] = useState(0)
}state 갱신을 위해서는 위에서 선언해준 addCount 함수를 이용하면 된다. 이번에는 count의 값이 1씩 증가시키는 함수를 작성해보자.
... 생략 ...
return(
<div className='countExample'>
<p>count</p>
// onClick 함수 내부에 addCount를 호출하는 함수를 정의해줬다.
<button onClick={() => addCount(count++)}>addCount</button>
</div>
)정상적으로 동작하는 것을 볼 수 있다.
props
props의 특징은 다음과 같다.
- 컴포넌트의 속성을 의미한다. 위에서 예로 들었듯이 props는 성별과 이름처럼 변하지 않는 외부로부터 전달받은 값을 뜻한다.
- 부모 컴포넌트로부터 전달 받은 값이다. 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용될 수 있다.
- 객체 형태이다. 즉, 어떤 타입의 값이든 컴포넌트로 전달할 수 있다.
- 읽기 전용이다. 함부로 변경될 수 없는 읽기 전용 객체이다.
만약 props의 값이 읽기전용이 아니라면, 자식 컴포넌트에서 props의 값을 변경했을 시 의도치 않은 부모 컴포넌트의 값에 영향을 미칠 수 있다.
props 사용법은 다음과 같이 3단계 순서로 나눌 수 있다.
- 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.
- props를 이용하여 정의된 값과 속성을 전달한다.
- 전달받은 값을 렌더링한다.
사용법에 따라 간단히 코드를 작성해 보자.
const Parent = () => {
return(
<div className = "parent">
// 자식 컴포넌트의 속성으로 넘겨줄 데이터를 작성한다.
<Child githubLink={'https://github.com/0scar0421'}/>
</div>
)
}
// 함수에서 인자를 전달 받았을 때와 동일하게 사용한다.
const Child = (props) => {
return(
// 전달 형식은 객체 형식이다. {key: value}
<div className = "child">
// 두 코드의 결과는 동일하다.
<a href={props.githubLink}>github</a>
<a href={props['githubLink']}>github</a>
</div>
)
}다음 코드는 props.children로 props를 사용하는 방법이다.
// 자식 컴포넌트태그 사이에 넘겨줄 값을 작성한다.
<Child>'https://github.com/0scar0421'</Child>
// 함수에서 인자를 전달 받았을 때와 동일하게 사용한다.
<a href={props.children}>github</a>
<a href={props['children']}>github</a>다음과 같이 여러개의 값을 넘겨 줄 수있다.
const propsData = {
link: 'https://github.com/0scar0421',
text: 'oscar\'s github'
}
// 부모 컴포넌트 내부
<Child>{propsData}</Child>
// 자식 컴포넌트 내부
<a href={props.children.link}>github</a>
<p>{props.children.text}</p>Event Handling
기본적으로 React의 이벤트 핸들링은 DOM의 이벤트 처리 방식과 유사하지만, 몇 가지 문법 차이가 있다.
- React에서 이벤트는 소문자 대신 카멜 케이스를 사용한다.
- JSC를 사용하여 문자열이 아닌 함수로 이벤트 핸들링을 한다.
예를 들자면 다음과 같다.
// html에서의 이벤트 핸들링
<button onclick='handleEvent()'>Event</button>
//React에서의 이벤트 핸들링
<button onClick={handleEvent}'>Event</button>여러가지 이벤트 핸들러 중 2가지의 핸들러를 알아보자.
- onChange
inputtextareaselect와 같은 form 엘리먼트는 사용자의 입력값을 제어하는데 사용된다, React는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리한다.
const NameForm() = {
const [name, setName] = useState('');
return(
<div>
<input type='text' value={name} onChange={(e) => setName(e.target.value)} />
<p>{name}</p>
</div>
)
}- onClick
onClick은 사용자가 클릭이라는 행동을 하였을 때 발생한다. 버튼이나<a>태그를 통한 링크 이동 등과 같은 상황에서 발생한다.
const ClickEvent() = {
return(
<button onClick={() => console.log('clicked!!')}
)
}마치며.
바닐라 자바스크립트에서는 변수 값의 변경이 일어나면 직접 DOM에서 수정해 반영 해줘야했다. 하지만 리액트에서는 state로 변수의 상태를 관리하여 변수 값이 변하더라도 별도의 코딩없이 변수 값을 변경해주니 큰 일이 하나 줄었다는 느낌을 받았다.
리액트의 기능을 하나하나 배울때마다 성장하는 것 같아 기분이 좋다.
