state가 크고 복잡하고 여러 state가 결합된 상태에 사용한다.를아직 잘 모르겠다.더 심플해진 것 같긴하다.

side effect란화면에 정보를 가져오지 않는http리퀘스트나 set time, 로컬스토리지에 저장, 예외 처리 등 리액트가 직접하지 않는 것일반적인 컴포넌트 함수 밖에서 일어나야 하는 일사이드 이펙트가 컴포넌트 함수에 직접적으로 들어가면 무한루프등에 빠져 에러가

간단하게 값을 읽어오는 일에 사용일단은 여기까지

모달창이나 다이얼로그를 구현하는데 따로 분리가 되지 않고 같이 구현해 놓으면 구조적으로 의미적으로 좋지 않다. 충돌 등이 일어날 수 있나보다.구현되는 곳index.html 같은 곳에이렇게 분리할 곳을 만들어 놓고포탈을 만들어서 거기에다가 넣는다.props를 맞춰 넣어주

에러 메세지를 보고 에러가 난 부분을 해결한다.개발자 도구에 source에서 리액트 원본 파일을 찾아 break point를 설정하고 그 에러 과정을 실행하면서 찾아서 해결한다.React Developer Tools란 크롬 익스탠션을 설치개발자 도구에서 componen

Adjacent JSX elements must be wrapped in an enclosing tag태그를 하나로 감싸지 않아서 나오는 에러키 관련 에러 Encountered two children with the same keyKeys should be unique

styled components를 사용할 때와 같이 css를 컴포넌트 별로 구분해서 사용하고자 할 때 사용한다.클래스 이름을 고유하게 바꿔준다. 컴포넌트이름-클래스이름-고유해쉬값으로 겹치지 않도록우선 module을 css 파일 이름에 넣는다.원래 Button.css라면

인라인 방식으로 클래스 추가 방식으로

조건부로 내용을 출력할 때 삼항 연산자를 사용한다.

여러 개의 오브젝트가 담긴 객체를 랜더링할 때 map을 사용한다 foreach를 사용할 줄 알았는데 의외다.화살표 함수 뒤에 중괄호가 아닌 그냥 괄호인것도 의외다여기서 리액트는 멍청하게 리스트의 길이와 만든 컴포넌트의 갯수만 같으면 같다고 생각하기 때문에 이것을 구분할

자식 컴포넌트끼리는 서로 데이터 주고 받기가 안돼서 부모 컴포넌트에서 처리해줘야한다.부모 컴포넌트가 직접 사용하거나 다른 자식 컴포넌트로 전달해주는 것데이터를 생성한 컴포넌트와 데이터를 사용하는 컴포넌트까지 끌어올린다.

이렇게 ExpenseForm를 import 해와서 사용할 때자식 컴포넌트를 사용할 때함수를 만들어 준 다음에prop에 넣어준다 이러면 부모 컴포넌트의 함수를 자식 컴포넌트가 사용할 수 있다.이렇게 사용한다.함수를 줬기 때문에 그냥 바로 사용한다.이렇게 해서 자식 컴포넌

useState 컴포넌트가 다시 호출되는 곳에서 변경된 값을 반영하기 위해 한다.값이 변동되는 컴포넌트const title, setTitle = useState(props.title)useState안에 초기값을 넣는다title은 초기값setTitle은 함수가 나온다se

이렇게 쓰인다 괄호는 function으로 만들어도 안써두 된다!

중복되는 css사용을 줄이기 위해 사용카드모양의 css가 중복되면 이렇게 카드 컴포넌트와 그 css를 붙힌 컴포넌트를 만들어 사용클래스가 망가지는 것을 막기 위해 클래스를 합쳐주고카드 안에 컨텐츠를 넣기 위해 children을 사용이런 형식으로 감싸준다모달창이나 경고창

다른 컴포넌트 안에 변수를 변경할때 사용한다?직접적으로 변경할 수 없기 때문에 props를 추가해서 데이터를 전달한다컴포넌트를 재사용 할 수 있게 해준다.이런식으로 컴포넌트에 props를 지정해줄수있다.해당 컴포넌트 함수에 props 인자를 주고{props.title}

리액트는 컴포넌트로 이루어져있다?인덱스.js는 시작할때 사용된다앱.js는 모든 컴포넌트 위의 컴포넌ㄴ트?컴포넌트 트리app 컴포넌트아래에header컴포넌트 task 컴포넌트이런 형식으로 구성된다?

리액트 문법 그냥 자바스크립트 함수에다가 html을 합친거 같다 아직까진...