React 자료

시작하기$ npx create-react-app my-app$ cd my-app$ npm run start$ npm run build <- 알아보기$ npm install -g serve $ serve -s buildJavaScript + XML(HTML)장점이

component 는 함수와도 같은데 (붕어빵틀)입력값으로 props 를 받아 (팥,슈크림.. ) // 속성element라는 출력을 한다. (붕어빵)function ComponetnsClass Components (많이 이용)Component를 만들 때는 항상 대문자로

React component의 상태 (data)component에 대한 변경 가능한 데이터state는 사용자가 정의한다. (렌더링하는 데이터만 사용)state가 변하면 렌더링이 된다.JavaScript 객체직접 변경하면 안된다 → setState()를 사용해야한다Mou

camelCase로 사용bind 해서 사용

조건에 따른 렌더링 return null 을 하게 되면 막을 수 있다.== pass 랑 비슷?

map 함수를 이용해서 여러개 출력 map 안에 있는 element는 key 가 필요하다.key는 props로 전달되지 않는다 → 따로 id라고 보내야한다고유한 값

= 양식모든 데이터를 state에서 관리<select multiple={true}> 로 복수 선택 사용가능Uncontrolled Component (읽기전용)

\*\*setState 를 이용해서 state를 바꿔야 한다.\*\*\*\*.bind(this) → event handler 안에서 this 사용할 수 있게 만들기\*\*

리액트를 가장 많이 쓰는 이유는 더 큰 개발 생태계입니다1년동안의 다운로드 횟수 그래프입니다. 여전히React 가 가장 인기 있는 라이브러리라는 사실이 보입니다. 더 많은 튜토리얼과 기사, 더 많은 확장 라이브러리가 존재하기 때문에 개발자들이 쉽게 손을 떼지 못하는 이

패스워드를 입력해서 맞으면 success class를, 틀리면 failure를 부여하고 싶다.className ={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}클릭이 되어 있지 않다

컴포넌트가 처음 render 될 때만 코드가 실행되게 하기첫번째 argument는 한번만 실행하고 싶은 코드두번째 argument로 \[]빈 값이 오게 된다면 시작만 실행 \[]안 내용이 있다면 그 값이 변경될 시 실행 추후 추가 작성하기

id 값 없이 index로 하게되면 수정 삭제가 까다로워 집니다.id 값을 쉽게 만드는 방법은 바로 아래 추가하기 부분에서 적겠습니다.input 을 적을 때마다 onChange로 바꿔줘야합니다.또한 제출되었을 때 , 새로운 todos를 만들어 예전 것을 copy하고

이런식으로 fetch 를 이용하고 then 을 이용해서 받아온다 → 하지만 요즘은 async-await를 사용한다??한번더 줄이기movies 가 있다면 div 태그 안에 movies를 map()으로 하나씩 보여준다.$ yarn add react-router-dom강의에

모든 페이지에 있는 어떤 컴포넌트에서든 사용이 가능하다.createContext 라는 함수를 불러와서 실행시키면 비어있는 context가 반환된다.const Usercontext = createContext()이 값을 export 시켜준다.그다음은 이 Context에

onclick 하면 value 값에 대한 값을 참조가능하다.whoWin 함수 ⇒ useCallback 을 사용해서 myturn이나 comturn이 바뀌게 되면 실행되게 한다. ⭐ whoWin을 사용하는 곳에서 useEffect를 사용했기 때문에 useCallback을

→ 거의 같지만 다른 단어이다. → 프로그래밍 언어가 작동하기 전에 type을 확인해준다.const plus = (a:number,b:number) => a+b: number 로 타입을 지정해 준다.plus(”1”,2) 라고 적으면 오류창이 뜬다.→ 알아서 tscon

Next.js을 사용하는 기업이 날로 늘고 있다. 왜 Next.js의 인기가 많은지 이해하고, 장점을 이해해보도록 하자. 리액트 기반의 프레임워크로 React(SPA)의 단점을 커버해 주는 역할을 의미합니다.SPA는 사이트에 접속할 때 하나의 페이지를 불러옵니다.하나의