개발(라이브러리,프레임워크)79 컴포넌트, 이벤트 컴포넌트 만들기 컴포넌트 상태 관리하기 기초에서 배운 것은 상태를 가지지않는 stateless컴포넌트였음 우리는 그것에서 더 나아가 상태를 가지거나 외관상 크게 변화하는 컴포넌트의 경우 상태를 갖고 관리해야한다. 상태를 가지게 하려면 ? > 값을 기억해야함 state 객체 가 값을 기억한다. state 특징 및 사용하기 state는 한번 값을 설정한 이후 값을 변경할때 setState()메서드를 사용해야 변경된다. 초기화하기 class extends React.Component { constructor(props) { this.state = {} } .... 값 변경하기 this.setState({ : }) ex> 시계 컴포넌트 만들기 state 상태를 매 시간마다 바꾼다. setstate()를 통해서 .. 2021. 5. 15. 가상 DOM 가상 DOM 가상DOM이란 ? DOM의 상태를 메모리위에 올려두고 DOM변경이 있을 때만 해당 변경을 반영한다. Dom의 일부만 변경됨 전체를 변경하는 것이 아닌 변경할 부분을 찾아 일부만 변경한다. 따라서 화면 처리속도가 비약적으로 빠르다. 컴포넌트 만들기(기초) 컴포넌트는 특정 기능을 가진 범용적인 부품을 나타내는 용어. 범용적인 컴포넌트를 만들어 재사용 가능하게 한다. 리액트를 이용해 컴포넌트를 만드는과정 JSX를 반환하는 함수를 정의하기만 하면 된다. ex> Hello 라는 컴포넌트를 정의한다. 매개변수로 전달받은 props의 props.type을 태그로 감싸서 출력하는 예 function Hello(props){ // ..중간에 필요한 기능을 넣어도 된다. return {props.type} }.. 2021. 5. 14. 리액트와 JSX의 관계 리액트와 JSX의 관계 태그 내부에 변수를 넣는 법 ..{value} ... 태그의 속성값에 변수를 넣는 법 2021. 5. 13. 리액트입문 리액트 프로젝트 만들기 https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html 참고 설치된 Node.js가 최신 버전인지 확인해보세요. 새로운 프로젝트를 생성하기 위해 설치 방법을 따르세요. $ npm install -g create-react-app $ create-react-app my-app 새 프로젝트의 src/ 폴더에 있는 모든 파일들을 삭제해주세요. (폴더 안의 내용만 삭제하되 폴더는 삭제하지 마세요) $ cd my-app $ rm -f src/* 이 CSS 코드를 src/ 폴더에 index.css 파일로 추가해주세요. 이 JS 코드를 src/ 폴더에 index.js 파일로 추가해주세요. src/ 폴더에 있는 index.js의 최상단에 아래 세 .. 2021. 4. 26. 이전 1 ··· 11 12 13 14 15 16 17 ··· 20 다음 반응형
