[React.Js] UseState 사용 / 간단한 리스트 만들고 지우기

React.js를 쓸 때 정말 많이 쓰는 hook 중에 하나인 useState 기본 중의 기본입니다.

 

일단 hook이란 무엇이냐?!

Hook은 특별한 함수입니다. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다! 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다.

사용 방법은 아주 간단하답니다.

아주 간단한 리스트를 만들면서 사용 방법을 알아보겠습니다

Birthday Reminder 라는 컨셉의 리스트를 한 번 만들어보겠습니다. 5명 가량의 사람 프로필이 필요해서 레드벨벳 멤버들 프로필 사진을 긁어서 사용했고요. 나이는 제가 마음대로 지어낸겁니다. 그냥 맘대로 쓴거니 오해마세요~

 

 

✅ App.js 에 데이터 정보를 담은 data 파일을 import해주고 데이터파일이 리스트로 나타날 List 파일도 따로 만들어서 import 해줍니다.

 

✅ 이름, 나이, 이미지 경로가 담겨있는 데이터 파일을 useState 안에 담아줍니다.

✅ 6번째 줄을 보시면 일단, state변수를 선언해줘야합니다. [people, setPeople] 은 안쪽에는 state변수를 뒤에 있는 것해당 변수를 갱신할 수 있는 변수, 이 말인 즉슨 어떠한 명령이 떨어졌을 때 변경되는 값을 담는 곳이라고 생각하면 됩니다.

✅ useState() 안에 들어가는 인자는 초기값입니다. 데이터파일이 들어가있기 때문에 데이터파일 안의 데이터가 초기값으로 설정이 되었습니다.

✅ import 된 < List />파일에 props로 데이터를 넘겨줍니다. 그 밑에 있는 clear 버튼을 보세요!

✅ onClick으로 어떠한 함수를 실행시켜줍니다. 이때 그 어떠한 함수는 데이터를 삭제하는 것이겠지요! 이 때, 해당 변수를 갱신할 수 있는 변수 setPeople 안에 비어있는 array를 넣어줍니다. 그러면 people안으로 들어가는 값이 빈 배열로 바뀌겠지요?! UI상의 삭제이기 때문에 새로고침하면 리스트는 다시 뜬답니다

 

 

 

쉽죠? 사용시 유의사항은 useState는 항상 함수나 컴퍼넌트 안에 속해 있어야합니다. 밖에서 선언하실 경우 적용이 되지 않습니다. 이상 간단하게 useState 사용하는 방법이였습니다