<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
따라서 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의 리스트 부분을 열어주면 되겠다.