state & props 오답노트
- 아래와 같이 이벤트에 함수 자체가 아니라 함수의 실행을 전달하게 되면 리턴값이 onClick으로 전달되어서 함수의 결괏값이 전달된다. (+랜더링 할 때마다 해당 함수가 호출되기 때문에 성능 저하 문제)
onClick = {handleIncrease()}//X- 이벤트 핸들러는 props로 전달할 수 있다.*
- props.children은 props의 특별한 속성으로, 컴포넌트의 여는 태그와 닫는 태그 사이의 내용 포함.
<Tweet>나의 새 트윗</Tweet>
//여기서 '나의 새 트윗'이라는 문자열을 div 태그 안쪽에 출력하려면
function Tweet(props){
return
<div>{props.children}</div>
}- state로 사용할 데이터 고르기 : 제품 목록과 가격을 확인하고 그 중 재고가 있는 제품만 확인할 수 있는 작은 웹 애플리케이션이 있을 때, 그리고 이 앱을 리액트로 만들었을 때, state가 되어야 하는 데이터는 언제든지 바뀔 수 있는 '사용자가 입력한 검색어' 등이다. 제품 목록의 이름, 가격, 재고 여부 등은 서버로부터 받아오는 정해진 데이터이므로 state라고 할 수 없음.
- select 태그는 Form 앨리먼트의 하나로 사용자의 입력값을 제어하는 데 주로 사용. 리액트에서는 이러한 변경될 수 있는 값을 일반적으로 컴포넌트의 state로 관리 & 업데이트.
state & props 추가
-
state 와 props의 필요성 : 프론트엔드 애플리케이션의 특성 상 변하는 값이 많고, 그 하나의 값이 변하면 다른 곳에 영향을 미치는 경우가 많다. 변하는 값을 state로 다루고, 영향을 미치는 경우 props로 전달해주면 훨씬 편리하게 데이터들을 다룰 수 있다.
-
state가 변경되면 컴포넌트는 리랜더링/재랜더링* 된다.
-
props의 immutable은 중요하다 !! (props.username = "안녕" 이런식의 변경 x)
-
상태 변환 함수는 setState라고도 불렀다 (예전에)
- controlled component
React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. 출처
- 항상 실제 데이터는 '변하는 값'이라는 점을 유념해야 함.
더미데이터에 있는 tweet 5개를 그냥 dummyTweets[0] ~ dummyTweets[4] 까지 만들어 줄 수 있지만, 그러면 새로운 값이 추가 되었을 때 반영될 수 없는 문제점이 존재함.
그래서 map을 사용하면 데이터들이 들어있는 배열을 순회할 수 있고, 더불어 새로운 값이 추가 되어도 반영된다!
- push 말고 구조분해할당 사용해서 새로운 데이터 맨 앞으로 꺼낼 수 있다!
const [data,setData] = useState(dummyTweets)
const handleButtonClick = (event) => {
const tweet = {
id: data.length + 1,
username : user,
picture: '',
content:msg,
createdAt: new Date(),
updatedAt : new Date(),
};
setData([tweet,...data]);
};
//button을 클릭하는 이벤트가 발생했을 때, 초기에 현재값으로 dummyTweets가 들어있지만,
//새로 들어온 값인 tweet를 앞에 그리고 '...data' 이용해서 이전의 dummyTweets 값들도 위에 붙여줌.
//혹시 누군가가 이 글을 본다면...부분만 잘라서 가져온 거라 이해 안 될 수 있음 주의...- 위에서 push를 사용해서 코드를 작성하면 안 되는 이유는 push를 사용할 경우, 자바스크립트만 바꾸는 것이고, 리액트의 어떤 blackbox라는 복잡한 부분에서 처리하는 것만큼 제대로 확인이 안 되어서 화면에서 잘 보여주지 못할 수도 있다...라고 야매로 이해했다.
twittler 과제 CSS
좋았던 점
-
배경 패턴은 내가 직접 그린 호박을 패턴으로 만든 배경이다!
이번에는 직접 디자인 구상까지 해보고, 필요한 것들을 만들거나 따로 다운 받아 준비하는 등, 내가 그냥 할 수 있는 데서 끝나지 않아서 뿌듯하다. -
전에 fontawesome을 사용하면서 버전때문에 애먹었던 것을 해결한 참이라 원하는 아이콘을 가져다가 만들 수 있어서 좋았다! 역시 문제를 직접 해결해봐야 다음에 그걸 사용할 수 있다는 자신감이 생긴다.
아쉬운 점
-
배경의 패턴이 조금 더 자잘했어도 괜찮을듯? 이제보니 좀 큰 것 같기도...
-
tweets 페이지의 width가 mypage나 about 페이지와 달라서 페이지가 바뀔 때마다 살짝씩 바뀌는 크기가 조금...킹받는다... 이유가 뭘지 찾아봐야겠음.
-
아예 다른 구성으로 만들어 봐도 좋았을듯! 그렇게 되면 왠지 시간이 오래 걸릴 거 같아 일단 주어진 컴포넌트 구성대로 만들긴 했지만... 다양한 모양으로 만들 수 있는 여지가 있을듯.
