728x90 반응형 Front_end17 react) 리액트는 무얼 하고 왜 쓰는가 1. 변경된 노드의 데이터만 화면에 재출력한다 -> 화면 변경 시간 단축 2. 작고 독립된 코드 블록 (컴포넌트)의 조합으로 화면을 구성 -> 빠르고 효율적(재사용 등) npm -> 노드 패키지 매니저 -> hpmjs.com에서 nodu_modules 폴더에 라이브러리를 받고 -> package.json에 명세하여 관리 yarn -> 페북에서 npm을 개선하여 만든 것으로 비슷함 웹팩 -> 기본 웹 문서 파일인 html/css/js 가 아닌 다른 스타일의 웹 문서를 해석해주는 컴파일러 같은 역할 -> 파일 단위를 적절한 크기로 나누거나 묶어주는 역할 -> 불필요한 파일 제외, 압축 등 -> 노드 기반 웹 서버 구동 등 2021. 7. 23. React) react-dom, Babel, state react-dom은 현재 react 페이지와 코드의 차이를 찾아서 자동으로 수정해줌 babel은 코드를 쉽게 작성할 수 있게해준다 -> 1. constructor(구조체?)를 정의하지 않아도 된다 2. react에서 사용하는 jsx 코드를 html 코드처럼 사용할 수 있게 해준다 react는 a 태그 사용 X -> 리액트는 spa (single page application) : 한 페이지 내에서 화면 전환이 이뤄진다 변경이 필요한 data만 변경되고 페이지 reload가 일어나지 않기 때문에 훨씬 효율적 state -> 상태 값을 정의 setState()로 변경 가능 return() 내에 함수를 정의해서 사용 가능하다 2021. 6. 30. React) props react 컴포넌트 (사용자 정의 태그)에 속성 값을 받아 본문의 값으로 사용함으로 컴포넌트를 가변적으로 사용 -> {this.props.속성명} class Subject extends Component{ render(){ return( {this.props.title} {this.props.sub} ); } } class App extends Component { render(){ return ( ); } } 2021. 6. 29. React) 리액트 컴포넌트 웹의 기능이 많아지고 점점 복잡해짐에 따라 html 또한 더욱 복잡해지고 있다 리액트를 사용하면 복잡한 코드를 사용자 정의 태그로 기능별로 묶어 사용 가능하다 -> 컴포넌트 컴포넌트를 사용하면 가독성과 재사용성이 높아져 유지보수에도 용이해진다 class App extends Component { render(){ return ( hello ); } } 코드 안에 하나 이상의 html 태그가 있어야한다 react에서 사용하는 언어는 jsx jsx로 작성된 코드를 react에서 javascript 코드로 컨버팅을 해준다 2021. 6. 29. 이전 1 2 3 4 5 다음 728x90 반응형