컴포넌트에서 컴포넌트로 전달하는 데이터 리액트 컴포넌트로 넘어가는 매개변수 컴포넌트를 효율적으로 재사용할 수 있다 데이터는 문자열을 제외하고 {}로 감싼다 function App() { return ( Hello ); } 데이터를 받는 컴포넌트 function Food(args){ console.log(args); return I like potato; } 받은 데이터를 사용할 때 function Food(args){ console.log(args); return I like {args.fav}; } 컴포넌트의 재사용 function Food({fav}){ return I like {fav}; } function App() { return ( Hello ); } Food 컴포넌트에 서로다른 props를 ..

App.js import React from 'react'; function App() { return ( Hello ); } export default App; App()함수가 정의하고있고, 함수가 html(jsx)를 반환하고있다 App컴포넌트를 정의한 것 App()함수가 반환한 jsx가 화면에 그려진다 컴포넌트의 생성 컴포넌트명.js 파일 생성 파일이름은 대문자로 시작 코드의 시작 : import React from 'react'; 반환값 입력 (JSX) 코드의 끝 : export default Potato; index.js ReactDOM.render( , document.getElementById('root') ); 컴포넌트의 사용 App.js impor..

자바스크립트의 확장 문법 번들링되는 과정에서 자바스크립트 형태의 코드로 변환된다 jsx function App(){ return ( Hello react ); } 변환 후 function App(){ return React.createElement("div",null,"Hello", React.createElement("b",null,"react")); } 특징 감싸인 요소 컴포넌트에 여러 요소가 있다면, 반드시 부모요소 하나로 감싼 후 리턴해야 한다 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 v16 이후부터는 div태그 대신 Fragment 기능 사용 가능 function App() { return ( 에러 에러 ); } export default App; function App..

프로젝트 생성 및 실행 node.js, npm, yarn 설치 node.js는 당장은 필요없지만, 설치시 npm이 함께 설치된다 npm은 패키지매니저 도구 node.js 설치 후, node.js의 cmd창 실행 npm 설치 확인 명령어 : npm -v yarn 설치 (패키지 관리자 도구) 설치 명령어 : npm install --global yarn 설치 확인 : yarn --version 코드에디터 설치 (Visual Studio Code) 설치 후 좌측 확장팩 설치 메뉴 이용 ESLint 설치 Reactjs code Snippets 설치 Prettier-code formatter 설치 Koran Language Pack for Visual Studio Code 설치 f1 누른 후 Configure D..

개요 자바스크립트의 발전 자바스크립트 만으로 대규모 어플리케이션을 만들 수 있게 됨 구조관리의 발전 필요 이를 해결하기 위해 수많은 프레임워크 출시 앵귤러,뷰js 등 해당 프레임워크는 주로 MVC, MVVM 아키텍쳐 사용 모델과 뷰가 있다는 공통점 보통 사용자가 어떤 작업을 하면, 변경사항을 뷰에 반영 반영하는 과정에서 뷰를 변형(mutate) 페이스북 개발팀은 뷰를 변형하는 것이 아닌, 새로 렌더링하는 방식 고안 리액트 리액트의 특징 리액트는 라이브러리이다 구조가 MVC등인 프레임워크와는 달리 오직 view만 신경쓰는 라이브러리 기타 기능은 직접 구현해 사용해야한다 컴포넌트 특정 부분이 어떻게 생길지 정하는 선언체 템플릿과는 다른 개념 재사용이 가능한 API로 수많은 기능을 내장 컴포넌트 하나에서 해당..

기존 스프링에서는 DAO 클래스에 @Repository 선언 해당 클래스가 DB와 통신하는 클래스임을 명시 마이바티스의 매퍼 어노테이션 지정 시, XML mapper에서 메서드의 이름과 일치하는 SQL문을 찾아 실행 mapper 영역은 DB와 통신, SQL쿼리를 호출하는 것이 전부이며 로직은 필요하지 않다 DAO @Mapper public interface BoardDAO { public int insertBoard(BoardVO vo); public List selectAll(SearchVO searchVo); public int selectTotalRecord(SearchVO searchVo); public int updateReadCount(int no); public BoardVO selectBy..