TIL 23.01.26

오늘은 React의 Props와 State를 배웠다.

 

props는 외부로부터 전달받은 값,

부모컴포넌트로부터 전달받은 값을 의미한다.

 

State는 컴포넌트 내에서 변할 수 있는 값이며,

State는 React State로 다루어야 한다,

 

useState를 호출하여, state변수와 변수를 갱신할 함수를 생성한 뒤,

갱신하는 함수를 호출하여, state값을 조작해야하고 강제로 변경하면 안 된다.

 

그 밖에도,

onClick, onChange를 사용하여 이벤트를 처리하는 방법등을 배웠다.

 

이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라,

리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 전달해야한다

 

why?

함수를 바로 호출하면 컴포넌트가 렌더링 될 때

함수 자체가 아닌 함수 호출의 결과가 onClick 에 적용

 

배운 내용을 바탕으로 과제를 진행하며, 실습을 하였다.

 

기능적인 구현은 마무리 했지만, 페이지를 새로고침을 하면 조작하던

데이터들이 초기화 되어서 localstorage를 사용하여 저장해주었다.

 

새로 localStorage에서 데이터를 받아주는 파일을 생성을 해주었고,

이 파일을 이용하여서 데이터를 불러오며 데이터를 조작했다.

 

위 데이터를 사용하여서 글을 생성한 예시이다.

새로운 객체를 생성하여, 기존 데이터와 배열로 합쳐 준 뒤에,

localStorage에 새로운 배열로 갱신시켜 주었다.

 

 

새로고침을 해주어도 글이 사라지지 않는 것을 볼 수 있다.