이번에 배울 것은 React의 Props인데요 ! Props란, Properties 즉 속성의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용합니다. 단방향 데이터 흐름을 가집니다. props는 state와 다르게 수정할 수 없다는 특징을 가지고 있습니다. 그리고, 문자열을 전달할 때는 큰따옴표 (" ")를, 문자열 외의 값을 전달할 때는 중괄호 ({ })를 사용합니다. 아래는 state글에서 다루었던 증가/감소 프로그램을 props를 이용해 초기값을 설정하는 프로그램입니다. https://peter-coding.tistory.com/184 [React] state (useState를 이용한) 오늘 배워 볼것은 React에서 state기능인데요 ! state를 사용하려면 import Re..
안녕하세요, 피터팬입니다! 오늘 배워 볼것은 React에서 usestate기능인데요 ! 응용프로그램에게 반응성을 추가하는 것이 state입니다. state가 없다면, 우리 UI는 절대 변하지 않을 것이빈다. state를 사용하려면 import React, {useState} from "react"가 필요합니다. 전에 배웠던 React의 state는 Constructor를 이용한 state였는데, 이번에는 useState를 이용한 훨신 간편한 방법입니다. 아래는 +를 누르면 count가 증가하고, -를 누르면 count가 감소하는 프로그램을 만드는 코드입니다. Component(Counter)를 화살표 함수로 만들어줍니다. 1. const [count,setCount] = useState(0) 처음보는 식..
Promise ; 비동기 처리에 활용되는 객체 - 원할한 데이터 통신을 위해 활용 ; 서버에 데이터를 요청했을 때, 데이터를 모두 받아오기전에 웹에 출력하는 오류 방지 구조 ; new Promise((resolve, reject) => {}) ; 대기 상태인 Promise객체를 생성하며 콜백 함수 선언 then()을 활용해 결과 값을 받을 수 있음 호출 성공인 resolve와 then function getData(){ return new Promise( (resolve, reject) => { let data = 10; resolve(data); }) } getData().then((resolvedData) => console.log(resolvedData)); 호출 실패인 reject와 catch f..
동기적 방식 ; 위에서 아래로 코드가 순서대로 실행 (thread가 1개) 비동기적 방식 ; 한번에 여러개가 진행 (thread가 여러개) - 콜백함수를 통해 JS는 동기적 방식 기반임 but 비동기 방식으로 처리되는 함수들이 있음 ex) setTimeout() Heap ; 변수, 상수, 함수 등 저장 동기적 처리 ; Call Stack에 옮겨진 후 처리 비동기적 처리 ; Web APIs에 옮겨진 후 , 비동기적 처리 됨 -> Callback Queue에 옮겨지 후 Call Stack에서 처리 콜백 함수 ; 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수 function func(a, func2) { console.log(a); const res = 5; func2(res); } func("a..
React 공부법 1. ES6 문법과 JavaScript Immutability를 이해하고 시작 - React의 props, state 개념은 위 내용을 빼놓고 설명 불가. 꼭 이해하고 시작 할 것 2. React 는 책 대신 공식 문서로 시작 - React 만큼은 공식 관련 문서와 tutorial을 직접 진행하고 관련 자료들을 찾아보면서 직접 적용하는 방식으로 공부하는 것을 가장 추천 - 이 방법이 가장 짧은 시간 내에 양질의 지식을 얻을 수 있는 방법임은 확실 3. React 관련 구글링 시 지난 1년 이내로 설정 후 검색 - React는 정말 변화가 빠름 4. simple하게 가자. - 처음에는 CRA(create react app)을 통해 너무너무 간단한 앱을 만들기 => Redux 적용 -> 그..
React 개발환경 구축하기 1. CRA(Create React App) ; Babel, Webpack의 세팅이 이미 완료된 패키지 $ npx create-react-app # npx ; npm 5.2.0이상부터 함께 설치된 커맨드라인 명령어 + CRA 설치 파일 분석 src > index.js가 가장 먼저 실행 > index.html문서의 '#root'를 찾아 을 렌더시킴 import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); node_modules ; 설치된 노드 모듈 - package.json,package-lock.json에 설치된 노듈들에 관한 정보가 적혀있음..
React를 쓰는 이유 0. Component 기반의 UI라이브러리로, Component들을 만들어, 레고처럼 필요한 것들만 선택해 사용하면 됨 1. Virtual DOM을 이용하여 이전 페이지와 바뀐 부분들을 감지해 변화된 부분만 재 렌더링해줌 2. CSR방식을 채택하여 SPA(Single Page Application)구축을 가능하게 해줌 3. JSX문법을 사용하여 컴포넌트 별로 구성이 가능(Babel이 HTML문서로 변환해 줌) -> 재사용성이 좋아짐 4. 리액트로 웹을 개발하면 리액트 네이티브를 통해 앱 개발이 쉬워짐 5. 선언형 프로그래밍 방식임 ; 그냥 목적을 바로 말함 vs 명령형 프로그래밍 방식 ; 절차를 하나하나 다 나열해야함 ex) jQuery Virtual DOM ; UI의 이상적인 ..
