Author: dudghks9303

소괄호의 사용 범위 : 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

state state 안의 객체를 불러내는 것은 prop처럼 로 불러낸다 버튼에 onlick으로 number 값을 1씩 증가하는 함수를 넣고 싶다면 button 태그안의 onclick 에 대한 함수를 넣고{화살표 함수}에서 실행할 함수 부분에 this.setState({number:number+1}) 를 넣어주면 된다. [JSON 을 못넣기 때문에 억지로 쪼개서 적음] setState는 글자 그대로 State의 속성값을 set(변경)해준다 똑같은 number 처럼 보이지만 앞의 number는 프로퍼티이고 뒤에 number는… Read more

node.js 모듈을 다운받아서 쓰는 방법[github에는 용량이 크기 때문에 업로드가 되지 않음] create react-app 으로 설치한 리엑트 프로젝트의 node_modules은 github에 올라가지 않기 때문에 다운로드 받아서 사용할 때는 해당 프로젝트 폴더로 들어가서 npm install을 통해 node_modules을 다운로드 받아야 한다.[위 과정 설명] 컴포넌트 클래스형 만약 내용을 수정하고 저장하면 수정된 값이 바로 적용된다. 함수형 컴포넌트는 여러개 작성 할 수… Read more