app.js 셋팅할 땐 처음부터 시작하는게 좋다.
import(안써도 되게 변경)/export까지 입력
useState로 묶어주게 되면 변경되는 것을 인지한다.
화면을 다시 그리는 기준, 그러니까 렌더링을 다시 하는 기준은 props, state다.
state를 직접 변경할 수 없기 때문에 항상 set이라는 구문을 사용한다.
항상 useState로 묶여있어야 리액트가 인지한다.
변경되는 값을 잡기 위해서 따로따로 useState를 준다.(form)
코드 리뷰를 해주셨었지만 결론적으로 정리하자면 이 부분들이 이번 강의에서 중요한 점이었다고 생각한다.
재창님 정리 너무 좋아서 첨부~
https://velog.io/@abcwockd95/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9%ED%81%B4%EB%9F%BD-%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%BA%A0%ED%94%84-TIL26
내가 복습할 때 보기 쉽게 밑에 복사해버리기~~
리액트
React 는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.
react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용된다
Component
Component는 독립적인 단위의 소프트웨어 모듈을 말합니다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있습니다.
기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.
애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가진다.
Props
Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터이다.
쉽게 읽기 전용 데이터라고 생각하면 될 것 같다.
자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
useState
useState는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
useState는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.
클래스형 컴포넌트에서만 사용할 수 있고, 각각의 useState는 독립적이다.
useEffect
useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트를 해주는 함수이다.
useEffect는 콜백 함수를 부르게 되며 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있다.
실행 조건
페이지가 처음 렌더링 되고 난 후 무조건 한 번 실행된다.
useEffect에 배열로 지정한 useState의 값이 변경되면 실행된다.
실행 방법
어느 값이든 변할 때 마다 실행된다.
무조건 단 한번 실행된다. 그 후 실행되지 않는다.
지정된 변수 혹은 오브젝트가 변할때만 실행된다.
// 1. Dependency가 없는 방법
useEffect(() => {});
// 2. 대괄호를 이용하는 방법
useEffect(() => {}, []);
// 3. 대괄호 안에 특정 변수를 지정하는 방법
useEffect(() => {}, [특정변수 혹은 오브젝트]);