Category: 수업내용

참고사이트들 https://react.vlpt.us/react-router/01-concepts.html https://reactrouter.com/en/main/start/tutorial npm install react-router-dom 로 설치 index.js에 import {BrowserRouter} from ‘react-router-dom’; 추가 src 안에 page 폴더 생성하고 안에 Home.jsx와 About.jsx 생성 App.js에 import {Routes} from ‘react-router-dom’;추가 div 대신 routes로 교체[div 안에 사용해도 상관없음] 위 import 안에 routes,route로 하나 더 추가 <Route path=’주소’ element={<컴포넌트 이름/>}/> 추가 주소에 / 만 있으면 첫 화면에 보이는 주소 <Route path=’/’ element{<Home/>}/>와 <Route… Read more

useEffect-Hook useEffect를 사용하면 라이프사이클 메서드의 효과를 나타 낼 수 있다. DidMount와 DidUpdate를 함께 쓰는것과 동일하다. useEffect(()=>{},[])모양 두번째 인자인 []의 경우 빈 값이면 컴포넌트 생성시에 실행 [] 안에 state 값이 들어갈 경우 특정 state값이 바뀌면 useEffect를 실행하도록 한다. 즉, 만약 특정 state의 set메서드를 넣게 된다면 그 특정 state의 값이 바뀔때마다 set메서드 가 실행된다. awake-asyne 또한 쓸… Read more

소괄호의 사용 범위 : if() / ()&&() / 1+3+(5-1)->1.구분 2. 먼저 실행할 연산 React 특징 : 가상돔>데이터-가상돔을 엮어서 생각 변수의 자료형태에 대해서 알고 사용-그 중에서 여러개의 데이터를 사용하는 배열 객체를 비구조 할당 할 때에는 객체의 변수이름과 같이 들고와야 한다. 대신 순서는 상관없다 배열의 경우에는 이름은 원하는 대로 적어 줄 수 있지만, 순서는 고정이다. 즉, 이름을… Read more

16.x 버전 이후로 생겨난 버전 예 const ArrowComponent=()=>{ return <div> 화살표 함수로 만든 컴포넌트입니다</div>}; export default ArrowComponent; 특징 : this.을 사용하지 않는다. 안에 값을 넣어 줄 때 변수로 할당하므로 const나 let 사용 props의 경우 매개변수 자리에 props를 넣어서 사용한다. return에 사용 할 때에는 props.속성명 이다. const ArrowComponent=(props)=>{let {props 속성이름}=props; return<div></div>} export default ArrowComponent return 전에… Read more

부모에 <자식 컴포넌트이름 속성이름=속성명/>을 해놓으면 자식에서 constructor로 부모의 props 값을 가져 올 수 있다. Read more

map() : 반복되는 컴포넌트를 랜더링하기 위하여 자바스크립트 배열의 내장 함수[React에서 for문 대체] 문법 : arr.map(callbackFunction(currenValue,index,array),thisArg) 콜백 함수 : 새로운 배열의 요소를 생성하는 함수. 인수 : currentValue : 현재 배열 내의 값 / index : 현재 배열 내의 인덱스 / array : 현재 배열 thisArg(선태항목) : 콜백 함수 내부에서 사용할 this 레퍼런스 설정 ex) let numbers=[1,3,5];… Read more

모든 컴포넌트는 여러 종류의 ‘생명주기 메소드’를 가지며, 이 메서드를 오버라이팅하여 특정 시점에 코드가 실행되도록 설정 할 수 있다. componentDidMount(){} : 마운트[실행] 하면 동작함 componentDidUpdate(){} : 새로운 props나 setState(), forceUpdate()가 실행할때마다 동작 componentWillUnmount(){} : 엄격모드(React.StrictMode)를 사용 시에 동작-마운트와 마운트 중간에서 나옴 이를 이용해서 1초마다 자동으로 값이 바꾸어야 하는 시계도 작성이 가능해진다. constructor안의 this.state에 date:new Date()작성-초기에 받아올… Read more

ref[reference] : 콜백 함수를 통한 ref 설정 식으로 해보면 current에 접근한 것이 확인된다. 여기서 .current까지 가야 input 태그에 접근한다. 예를 들어 버튼을 클릭했을 때 input의 색을 빨간색으로 지정하고 싶다면 button 화살표 함수 실행파트에 와 같이 확실하게 지정해주면 된다. 컴포넌트도 가능하며 import로 불러오는 과정만 추가된다. Read more

카멜표기법 : onClick{}의 형태로 실행 함수 형태의 값 전달 : ()=>{} 호살표 함수 사용, 작성 후 변수 이름으로 전달 Dom요소에만 설정 : 컴포넌트에 전달 시, 속성(props)으로 들어간다 [ES7-React/Redux/React-Native/JS snippets 확장을 했다면 빈 공간에 rce를 입력하면 기본형태가 바로 완성된다.] 화살표함수로 쓸 때에는 this(자기자신-컴포넌트 클래스 호출)이 가능한데 익명함수로 쓸 때에는 연결된 객체가 없으므로 undefined가 출력된다. 이때 익명함수의… Read more

컴포넌트 기본형태-클래스형(16이전버전. 이후에는 함수형이 추가됨) 클래스형 장점 : react에서 component를 받아와서 상속 App.js에 들고와서 출력할 수 있다. 되도록이면 위 컴포넌트 이름과 사용할 이름을 동일하게 하면 구분이 편하다. 정상적으로 적었다면 사용할 이름이나 위치를 Ctrl 키를 누르고 클릭하면 동일한 파일로 이동한다. prop-속성이름과 값을 찾아옴 defaultProps : props이 전달되지 않았을 때 undefined 대신 기본으로 들어갈 값 지정. 컴포넌트… Read more