Over the limit

DOM? - Document Object Model. HTML, XML 문서의 프로그래밍 interface - 웹 페이지의 객체 지향 표현 - 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할 -> 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. - 자바스크립트와 같은 스크립팅 언어로 DOM을 수정할 수 있음 RN vs React - RN에서 라이프 사이클은 웹에서의 렌더링과 같지만 렌더링 절차는 조금 다르다. 브릿지에 의존하기 때문. - 브릿지는 JS코드를 통해 네이티브 계층과 통신하는 역할을 한다. JS스레드(=JS코드가 실행되는 장소)정보를 받아 네이티브에 전달한다. 네이티브를 담당하는 ..

잘 살아있는 API를 데려올테다 먼저 useEffect로 axios 내용을 가져오면 콘솔에 다음과 같이 찍힌다. 이름만도 잘 찍힌다. 상태 유지 관리를 용이하게 하기 위해 useState + useEffect + async 형식으로 변경하자 첫 줄 useState({})를 useState(false)로 적어둬서 뻘짓 엄청함... 배열로 주고 받기 때문에 괄호 안 값 신경쓰자 역시 콘솔에 잘 뜸. 이제 다른 컴포넌트로 props 넘겨서 정보 받아오자

가운데 정렬 하겠다고 margin-left, right로 땜빵X.. 모든 화면의 환경과 픽셀은 다르기 때문에 절대 언제보나 중앙 정렬로 안나온다. 이럴 땐 부모 div와 자식 div 를 활용하자 //RecommendedList.js //내용 //RecommendedList.module.css .parent{ display: flex; } .child{ margin: auto auto; } 편 ㅡ 안 다음과 같이 창을 줄여도 가운데 정렬이 잘 따라온다.

버튼을 누를 때마다 해당 값에 알맞는 JSON 데이터를 가져와서, 원하는 자리에 채워넣고 싶음 +) 참고로 JSON 형식 지켜가면서 하기.. https://jsoneditoronline.org/#left=local.mateyi&right=local.qagaku JSON Editor Online: JSON editor, JSON formatter, query JSON You need to enable JavaScript to run this app. News Mobile-friendly 2022-08-29 The JSON Editor Online application is now mobile-friendly, you can enjoy it on smaller screens and touch devices ..

useEffect() React component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 리액트 Hook 0. 기본 형태 useEffect(function, deps) function : 실행하고자 하는 함수 deps : 배열 형태, function을 실행시킬 조건 -> 해당 조건에 맞는 값이 업데이트(=mount) 될 때 useEffect를 실행한다. +) 컴포넌트가 - 마운트 됐다 = 처음 나타났다. - 언마운트 됐다 = 사라졌다. - 업데이트 됐다 = 특정 props가 바꼈다. 1. Component가 Mount 되었을 때(나타날 때) useEffect(() => { console.log("렌더링 될 때마다 실행"); }); deps 부분을 생략했다. 어떤 빈 배열도 들어가지 않은 ..

onClick을 통해 버튼이 눌리면 상태가 변하기 때문에, 이 부분에서 useState를 활용한다. style변화는 getElementById를 사용해서 id 값으로 눌린 버튼을 찾고, 그 위에 스타일을 바로 적용해준다. const Navigator = () => { const [currentClick, setCurrentClick] = React.useState(null); const GetClick = (e) => { setCurrentClick(e.target.id); }; React.useEffect{ (e) => { if (currentClick !== null) { let current = documnet.getElementById(currentClick); current.style.color..

redux-thunk, redux-promise 설치 redux-thunk 어떻게 function을 받을 지 알려줌 redux-promise 어떻게 promise를 받을 지 알려줌 이 둘 없이 redux를 사용하면 에러가 많이 나게 됨 index.js 에서 redux 연결시키기 //index.js .. import {Provider} from 'react-redux'; ReactDOM.render( .. middleware 적용 //index.js .. import {Provider} from 'react-redux'; import promiseMiddleware from 'redux-promise'; import ReduxThink from 'redux-thunk'; const createStoreWi..

Props 소통 방식 : 부모 컴포넌트 -> 자식 컴포넌트 컴포넌트간에 무언가 주고 받으려면 prop이 필요하다 immutable. 변하지 않는다. 자식 컴포넌트의 값이 바뀌려면 부모 컴포넌트에서 다시 값을 내려줘야 바뀜 State 소통방식 : 컴포넌트 안에서 데이터를 전달함. mutable. state가 변하면 re-render가 된다. Redux가 상태를 Redux store에 저장해서 바로 action이 접근할 수 있게끔 해준다. 참고> https://xean.tistory.com/89 Redux 사용의 기본 Redux 사용 이유는? 1. props 전송 없이 모든 컴포넌트가 데이터를 바로 꺼내쓸 수 있도록 하려고 2. reducer, dispatch 함수로 state 데이터 관리를 용이하게 하려고..

Redux 사용 이유는? 1. props 전송 없이 모든 컴포넌트가 데이터를 바로 꺼내쓸 수 있도록 하려고 2. reducer, dispatch 함수로 state 데이터 관리를 용이하게 하려고 Reducer a function describing how the application's state changes (previousState, action) => nextState reducer함수로 state데이터의 수정 방법을 미리 정의한다. state 초기값과 데이터 수정방법을 넣는다. function reducer(state = 초기값, 액션) let 초기값 = [ {id: 0, name: '멋진신발', quan : 2}, {id: 1, name: '멋진신발2', quan : 1} ]; function ..