반응형 IT/React9 React ready..! (npm npx git node yarn) node 브라우저 밖에서 자바스크립트를 실행 할수 있게 해주는 실행환경 node를 설치 하면 자동적으로 설치되는 npm npm 은 패키지 매니저, 패키지 관리, 외부 라이브러리를 쉽게 설치 하고 버전 관리 할 수 있게 도와준다 npm 설치시 자동으로 설치 되는 npx npx는 패키지 개별적 실행을 도와주는 툴 npm을 대체사용 yarn! npm 단점을 커버하는 yarn 필요한 라이브러리를 병렬로 실행해서 속도차이가 남 조금더 빠르고 보안에 안전 React 공식 사이트: https://reactjs.org/ React 베타 문서: https://beta.reactjs.org/ Create React App: https://create-react-app.dev/ 2022. 11. 20. React 개념 정리 철학?? UI를 표기하고 Renders 하고 responds 혹은 events reacts(반응) 하게 하는 것 Components 단위 재사용성이 높아야 한다 컴퍼넌트를 잘 만드는게 핵심!!! 작은 솔루션 단위 대표적인 게 리엑트 UI를 만들 수 있게 도와주는 라이브러리!! 데이터를 State (내부 상태) Props (외부로 부터 전달받은 상태) 나타내는 render 가 있다. 상태가 변경될때마다 re-render 된다. 실제로 변경된 부분만 화면에 업데이트 된다. 함수형 컴퍼넌트 (Hooks) Hooks 재 사용가능한 함수다. use로 시작하는(useState useEffect useRef useMemo ...) useState 상태관리 로직 useEffect 컴퍼넌트 생애주기 관리 로직 useUs.. 2022. 11. 15. Points to remember React mpm 설치하고 업데이트 (버전관리, 성능, 보완문제) NPX 설치 하는것이 아닌, 원하는 패키지를 실행 할 수 있게 도와주는 툴 Yarn 페이스북에서 만든 패키지 메니저 npm 위에서 실행, 호환가능, npm의 문제점들의 성능을 보완해서 제작 git --version node -v npm -v yarn -v Component는 HTML을 반환하는 함수이다. varibles, classes, arrays, maps, returns >> Javascript. Jsx는 javascript 안의 HTML 이다. React application은 한 번에 하나의 component 만 rendering한다. setState를 호출할 때 마다 react는 새로운 state와 함께 render functi.. 2020. 7. 13. 배열항목 추가/제거/수정 상태관리를 CreateUsre.js 에서 하지 않고 부모 컴포넌트인 App.js에서 하고 input의 값 및 이벤트로 등록할 함수를 props로 받아서 사용한다. UserList.js import React from 'react'; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList({ users }) { return ( { users.map( (user, index) => () ) } ); } export default UserList; App.js import React, { useRef, useState } from 'react'; import UserList from './UserList';.. 2020. 5. 25. 배열 렌더링 하기 배열 렌더링 동적인 배열을 렌더링 할 때에서 배열의 내장함수 map() 을 사용 map() 함수는 배열안에 있는 각원소를 변환하여 새로운 배열을 만든다. import React from 'react'; function User({user}) { return( {user.username}({user.email}) ) } function UserList() { const users = [ { id:1, username:'jennie', email:'yyy@naver.com' }, { id:2, username:'rrr', email:'uuu@nate.com' }, { id:3, username:'eee', email:'www@naver.com' } ]; return ( {users.map(user => ( .. 2020. 5. 22. useRef 로 특정 DOM 선택/컴포넌트 안의 변수 만들기 useRef로 DOM선택 함수형 컴포넌트에서 ref를 사용 할 때에는 useRef 라는 Hook 함수를 사용 import React, {useState, useRef} from 'react'; function InputSample(){ const [inputs, setInputs] = useState({ name:'', nickname:'' }); const nameInput = useRef(); const{name, nickname} = inputs; // 비구조할당 으로 값 추출 const onChange = (e) => { const {value, name} = e.target; // 우선 e.target 에서 name 과 value 를 추출 setInputs({ ...inputs, // 기존의 i.. 2020. 5. 21. input/ 여러개의 input input 사용자 입력 태그 관리 방법 InputSample.js import React, {useState} from 'react'; function InputSample(){ const [text,setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } export default InputSample; App.js import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } expor.. 2020. 5. 21. props / 조건부 렌더링/ useState props 특정값을 전달하고자 할때 사용 App.js function App() { return ( ); } name , color >> props Hello.js function Hello({color, name}) { return 안녕하세요 {name}; //JSX } //default props Hello.defaultProps = { name: '이름없음' }; color name 파라미터로 받아옴 Props Childern Div안에 값이 아닌 어떤 컨퍼넌트 안의 값을 조회하기 위해 사용한다. App.js function App() { return ( ) } Wrapper.js function Wrapper({ children }) { const style = { border:'2px solid.. 2020. 5. 19. Jsx 내가 하는 React 정리 Babel jsx라는 문법을 사용하여 xml형태로 선언을 하면 javascript 형태로 변환하게 해주는 녀석 Jsx로 작성된 코드가 javascript로 제대로 작성 되기위한 준수사항 - 태그는 무조건 닫혀있어야 한다 - 2개이상의 테그는 꼭 하나의 테그로 감싸야 한다. 의미없는 를 넣는게 싫다면 프레그먼트 비어있는 태그를 사용한다 Jsx 내에서 Javascript 값을 보여줄 땐, { } 로 감싼다 function App() { const name ="react"; return ( {name} ); } 스타일을 설정을 넣어서 사용하고자 할때 객체를 작성 한다. html 처럼 Class를 사용하고 사용하고자 할땐 ClassName으로 사용한다 주석은 {/* 주석.. 2020. 5. 15. 이전 1 다음 반응형
