21일차
2021. 08. 17 화요일
1. Today's key points!
- React 3가지 특징
- SPA
- React Twittler
2. 정리해보자!
- React 3가지 특징 : 1) 선언형 코드 작성(프로그래밍). 2) 컴포넌트 기반 개발. 3) 어디에나 쓸 수 있다.
-> 가독성이 좋고 재사용할 수 있고 자바스크립트 기반이며 가벼운 라이브러리이다. - Component : 하나의 기능 구현을 위한 코드 모음집
- SPA(Single Page Application) : SPA의 가장 큰 장점은, 자바스크립트를 사용해서 웹 문서에 여러 interaction을 부여한 웹 어플리케이션 형태로 사용할 수 있다는 점 이다. 그러기 위해서 중요한 점은 JavaScript 파일과 HTML을 받아와서, 대부분의 동작은 JavaScript에 의존하여 작동시킬 수 있어야 한다. 페이지 이동 마다 전체 HTML을 받아오는 것은 기존 Multiple Page Application의 특징이다.
- Semantic Element : 태그 안에 의미가 담겨있다.
3. 복기해보기!
정리해보는 리스트가 없는 이유는 금요일(20일차)에 진행했던 스프린트 과제를 오늘까지 했기 때문이다.
근데 사실 주말을 통해서 과제를 마무리 했고, 어드밴스드 기능까지 구현했다. 우선 결과부터 보이자면..
이렇게 완성을 했고, 여기서 작동하는 기능은 크게 3가지가 있다.
첫번째 기능.
트윗 버튼 기능이다. 유저 네임과 메세지를 작성해서 트윗 버튼을 누르게 되면 밑에 트윗이 추가 된다.
여기서 어려움을 겪었던 것은 트윗 데이터를 state로 관리하고, 입력된 데이터를 추가시키는 것이었다. 그래서 차근차근히 어떻게 구현되는지를 생각했을때, 트윗버튼을 눌렀을 때 필요한게 무엇인지 생각을 했고, 그에 맞는 변수와 함수를 만들어 주었다.
정보를 받아오는 dummyTweets를 Tweets컴포넌트에서 새로운 변수에 할당해서 관리해주기 위해서
const [dummy, setDummy] = usdState(dummyTweets) 라고 선언해주었고,
버튼 클릭 함수는
const handleButtonClick = (event) => {
const tweet = {id : idNum,
username : name,
content : msg,
createdAt : ~~날짜 생성~~,
updatedAt : ~~날짜 생성~~}
setDummy([tweet, ...dummy]);
} 이렇게 선언해주었다. 그리고 버튼을 구현하면 아래의 결과가 나온다.
두번째 기능.
select, option을 통해 클릭된 유저이름만 트윗에 보이게 하는 기능이다. 우선 이 기능을 사용하기 위해서는 클릭된 이름의 값을 받아올 수 있어야하고, 유저 이름을 클릭했을 때 그 이름을 가진 트윗만 필터해서 트윗창에 보여야 한다. 그럼 여기서 state로 해주어야할 것이 '1) 옵션 데이터, 2) 클릭된 유저이름, 3) 필터된 데이터'가 될 수 있을 것이다.
const options = [{value : 'kimcoding', label : 'kimcoding'},
{value : 'parkhacker', label : 'parkhacker'},
{value : 'leedesign', label : 'leedesign'},
{value : 'songfront', label : 'songfront'},
{value : 'choiback', label : 'choiback'}];
우선 이렇게 초기 옵션 데이터를 만든 뒤에 state로 관리되어야 할 변수를 모두 선언해 주었다.
const [opt, setOpt] = useState(options); //트윗을 추가하면 options에도 그 데이터가 추가되야하기 때문
const [clickedName, setClickedName] = useState(''); // select창에서 유저이름을 클릭하면 받아올 값을 넣어줄 저장 공간.
const [filteredUser, setFilteredUser] =useState(dummy); // select창에서 유저이름을 클릭하면 필터될 데이터를 관리하기 위해서
그럼 이제 select 창에서 유저이름을 클릭했을 때 일어나야 할 일을 함수에 담아보자.
const handleSelectClick = (event) => {
setClickedName(event.target.value); // select창에서 유저 이름을 클릭하면 그 값을 clickedName에 저장.
setFilteredUser(dummy.filter((el) => { // selec창에서 유저 이름을 클릭하면 더미 데이터 안의 유저네임과 클릭된 값이 같은것만 return el.username === event.target.value; 필터링 해서 배열로 filteredUser에 저장.
}));
}
이렇게 변수와 함수를 선언해주고,
<div className="tweet__selectUser">
<select
name = "users" id = "user_select"
onChange = {handleSelectClick}
>
<option value = "">-- click to filter tweets by username --</option>
{opt.map((el) => {
return <option value = {el.value}
key = {el.value}
>{el.label}</option>
})}
</select>
</div> 이렇게 select창을 구현해주고,
{clickedName === "" ? tweet.map((el) => {return <Tweet tweet={ el } key = {el.id} handleDeleteClick = {handleDeleteClick} /> })
: filteredUser.map((el) => {return <Tweet tweet={ el } key = {el.id} />})
} 이렇게 삼항연산자를 통해서 Tweets하위 컴포넌트인 Tweet컴포넌트에 props를 전달해 주면 다음과 같은 결과를 볼 수 있다.
세번째 기능.
삭제하고 싶은 트윗을 삭제하는 기능이다. 이 기능을 사용하기 위해서는 생각보다 간단하다. 우선 삭제 아이콘을 Tweet 컴포넌트에 만들어주고, 아이콘을 눌렀을 때 트윗에 해당되는 id값을 불러올 예정이다. 그리고 삭제 아이콘을 눌렀을 때 실행될 함수를 만들어 dummy가 바뀌도록 코드를 짜주면 된다.
우선 아이콘을 만들어 준다.
<i className="far fa-trash-alt"
onClick = {handleDeleteClick}
id = {tweet.id} // id 속성에 tweet의 id값을 넣어준다.
></i>
그리고 아이콘을 클릭했을 때 함수를 만들어준다.
const handleDeleteClick = (event) => {
setDummy(dummy.filter((el) => { // dummy를 필터링하는데
return el.id !== Number(event.target.attributes.id.value); // 삭제 아이콘을 클릭했을 때 받아오는 값(id 값)이랑 dummy 배열
})); 안의 요소에서 id값이랑 같은 것만 빼고 다른 데이터를 남긴다.
} 그리고 'event.target.attributes.id.value'를 Number처리
해주는 이유는 이벤트 타겟으로 받아올 때 데이터 타입이 String
이기 때문에 숫자로 변환처리 해주는 것이다.
이렇게 해준뒤 구현된 결과이다.
이렇게 Advanced기능(select로 트윗을 필터하는 기능과 삭제하는 기능)까지 구현하면서 과제를 마무리 했다. 이 과제를 통해서 state와 props를 활용하는 방법에 익숙해지는 데 도움이 많이 되었다.
