# reactjs

s2ljeun

공부내용 한줄 요약.propTypes로 버그를 잡을 수 있다.1.< script src="https:/ /unpkg.com/prop-types@15.7.2/prop-types.js"></ script>추가2. 컴포넌트명.propTypes = { pr

intp0614

react, reactDom과 javax를 사용하려면 위의 소스코드를 적어줘야 한다. document.querySelector("div") 또는 document.getElementById("id") 등으로 hmtl 바디 태그 안의 위치를 지정해서 가져올 수 있다.

nuri00

2022년 4월 19일 ~ 5월 7일6명프론트엔드 3명백엔드 3명데이터분석 2명본인 : 백엔드 & 발표PythonReactJSMongoDBExpressNodejsredis프론트엔드와 백엔드로 나뉘어 진행한 두번째 프로젝트였다.첫 프로젝트때와는 달리 기획부터 데이터셋 선

leyuri

antd와 styled-components, _app.js와 Head, 반응형 그리드 사용, 로그인 폼 만들기

aurora1026

쇼핑몰 장바구니 페이지 클론 코딩은 잘 구현 되었는데 직접 새로운 프로젝트를 구현 하려고 하니 어려워서, Beginners CRUD Tutorial 내용 부터 클론코딩 하였습니다. 다음 목표인 쇼핑몰 상품리스트에 데이터 연동 해보고 싶어 전체적인 내용 기록 합니다.np

timcodejs

redux : 상태 업데이트와 관련된 로직을 효율적으로 관리하는 라이브러리.react-redux : redux와 react를 연동해주는 라이브러리.redux-saga : 비동기 작업을 처리하는데 도와주는 redux 미들웨어.redux-devtools-extension

timcodejs

BeforeAfterpublic/ 폴더 내부의 logo192.png, logo512.png, manifest.json, robots.txt 파일 삭제src/ 폴더 내부의 App.test.js, logo.svg, reportWebVitals.js, setupTests.j

hyj3363

react-router-dom 은 컴포넌트의 모음집이다.App.js에 컴포넌트를 지정해줄때 Router을 이용해서 경로도 지정해줄 수 있다.나의 경우 terminal에 'npm i react-router-dom@5.3.0' 를 명령해주었다.BrowserRouter, S

jinyinshu

\-apollo graphql prism등으로 만든 insta-backend server와 연동할 web-frontend를reactJS로 만듬.공식문서https://www.apollographql.com/docs/react/get-startedhttps&#x3

hyj3363

useState에 이어서 useEffect를 정리해볼까 한다.useState는 그 안에 있는 값이 변화할때마다 App()안에 있는 다른 함수들도 자동으로 호출이 된다.만약 여러번 호출되지 않기를 원하고 딱 한번만 호출 하길 원한다면 useEffect를 사용하면 된다.코

hyj3363

state에 이어서 props에 대해 정리해볼까 한다! 예를 들어 애플리케이션에서 여러개의 버튼을 사용한다고 가정해보자. 버튼의 디자인을 동일하게 통일시키는 것이 사용자가 보기에 깔끔하고 좋을 것이다. 그럼 버튼에 style을 지정 해주어야하는데 props를 사용하지

s2ljeun

props로 string, boolean, function도 보낼 수 있다.

hyj3363

보다시피 render라는 함수를 만들고 cnt라는 data가 업데이트가 될때마다 render()를 호출해야 화면에 바뀐 데이터로 뿌려지게 된다. 만약 cntUp함수에서 render()를 호출하지 않으면 웹 화면에는 cnt의 초기값인 0으로만 보일 것이다.다시 말해 st

s2ljeun

prop을 사용해 부모 컴포넌트에서 자식 컴포넌트로 object형식의 데이터를 전달할 수 있다.

timcodejs

Context API > state를 전역으로 관리해서 props로 내려주지 않아도 어떤 컴포넌트에서든 사용하고 관리가 가능하도록 하는 전역 상태 관리 도구. Context 설정하기 context.js App.js test.js

kimhyeongi

근본적으로 JSX 파일은 React.createElement (component, props, … , children)에 대한 문법적 설탕을 제공하는 것 그 이상도 그 이하도 아니다. ...

kimhyeongi

생활코딩 React 강좌를 통해서 처음 React를 접해보았다. 생활코딩 수업을 통해서 배웠던 내용들을 간단 요약해서 적어본다.

s2s2hyun

React는 다중 렌더를 사용을 권장하지 않습니다 . 대신 상태가 변경되면 페이지가 다시 렌더링 되는 상태 저장 접근 방식을 사용합니다. 위에 코드 구성 요소는 사실 잘 보면 아무런 구성요소가 없습니다 . 최신 시간을 포함하기 위해 "myElement"라는 중첩 JS

ahrvhska10

input의 disabled 속성은 인풋을 비활성화 시킨다.input 값은controlled component로 만들자.setState()에 함수를 할당하는 것을 잘 활용하면 이전 state를 손쉽게 바꿀 수 있다.

timcodejs

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.컴포넌트에서 바뀌는 값 관리하며, 값이 바뀐 것을 감지 후 랜더링해