문제상황
<Stinput style={{width:'400px', borderRight : '3px solid #3b5998'}}
type = 'text' value={title} placeholder = {'Add a title here...'}
onChange ={(event) => {setTitle(event.target.value)}}/>문제 상황은 아니고, 이제 좀 약간 내가 배운 것들을 활용해보는게 중요해 보여서 똑같은 로직을 다른 방법으로 써보자.
아무래도, useState를 이용해서 event.target.value를 하게 된다면
input에 계속 집어넣을 때마다 계속 리렌더링이 일어나게 되어, 불필요한 렌더링으로 최적화가 이루어지지 않게 된다는 문제가 생겼다.
이런 부분들을 해결하기 위해서 useRef를 배우지 않았겠는가?
중요 내용 복습
useRef
- 저장공간으로서의 역할, 리렌더링이 발생시키지 않는 값을 저장할 때 사용.
- state는 변화가 일어나면 바로바로 리렌더링이 일어난다. -> 내부 변수들 모두 리셋된다.
- ref는 변화가 일어나도 렌더링을 일으키지 않는다. ref값 변화가 일어나도 내부변수 값을 지킬 수 있다는 뜻.
- DOM요소 접근 방법으로서의 useRef의 활용.
따라서 Ref를 2번의 방법을 이용해서 input값에 접근해 보도록하자.
해결
const titleRef = useRef('');
<Stinput style={{width:'400px', borderRight : '3px solid #3b5998'}}
type = 'text' value={title} placeholder = {'Add a title here...'}
ref = {titleRef}/>
<Stinputbtn onClick={() => {dispatch(
AddList({
id : reducer.length,
title : titleRef.currect.title,
todo : todoRef.currect.todo,
isDone : false,
})
)}}><FaPlus/></Stinputbtn>
이런 식으로 반환 값이 current key값으로 객체 형태로 리턴되기 때문에 잘 염두해두자.
문제상황
Select를 눌렀을 때 리스트 컴포넌트가 열리지 않는 문제였다.
근데 사실상, 컴포넌트 달랑 놓고 어떻게 열어할지를 몰랐다는게 더 맞는 말이겠다.
<SelectHeader onClick={()=>setIsOpen2(!isOpen2)}>
<span>{selectedOption2 || 'Select an option'}</span>
<span>{isOpen2?'▲' : '▼'}</span>
</SelectHeader>
<SelectList>
{options.map((item)=>(
<Option key={item} onClick={()=>handleOptionHandler2(item)}>
{item}
</Option>
))}
</SelectList>해결
논리연산자를 이용하면 이런 간단한 로직을 구동시킬 수 있었다.
||(or) 연산자는 여러가지의 인자들 중에 가장 첫번째 truthy를 찾아 반환한다고 보면 된다.
<span>{selectedOption2 || 'Select an option'}</span>이 부분을 보면 selectOption2는 useState부분에서 초기값으로 ''비어 있는 값으로 설정했기 때문에,
''즉, falthy 하다고 볼 수 있고, 다음 인자로 넘어가게 된다.
다음인자는 string이기 때문에 truthy하기에 해당 문자열이 출력된다.
{isOpen2 && <SelectList>
{options.map((item)=>(
<Option key={item} onClick={()=>handleOptionHandler2(item)}>
{item}
</Option>
))}
</SelectList>
}isOpen 자체가 true 아니면 false 이기 때문에, 리스트를 열고 닫는 bolean 그 자체로 써도 되겠다.
&&(and) 연산자는 여러개의 인자들 중에 가장 첫번째의 falthy를 반환한다고 보면 되겠다.
그렇다면 위의 코드를 보자면,
isOpen이 false라면, ( = 리스트를 닫은 상태) 그 상태 그대로 보존,
isOpen이 true라면, ( =onClick으로 리스트를 열라고 하는 상태) select의 리스트 부분을 열어주면 되겠다.
