React?
jquery DOM의 연장선으로 dom=getElement등 메소드가 있고 그 메소드들을 모아둔 것이 Jquery이다.
React는 웹 페이지를 더 효율적으로 관리하고 유지보수 하려고 생겼다.
프레임워크가 아닌 라이브러리로서 MVC 디자인 패턴에서 View만 담당한다.
JSX->JS로 바껴야 브라우저에서 열리는데 이런 변환을 해주는 부분을 CRA가 다 해준다 JS는 웹브라우저에서만 작동했는데 탈웹으로 다른곳에서도 작동하게되는데 node.js와 npm이 있어야 CRA를 사용할수있다.
React 설치
request target
:전송되는 목표uri
터미널에서 CRA를 내 로컬에 설치한다.
: npx create-react-app instagram(변수명)
sass 다운
프로젝트 터미널에서 : npm install node-sass
npm install -g serve
:어디에서나 serve로 웹서버를 설치한다.
React 구조
: UI 구성 단위로 하나 하나의 단위로 클래스형 / 함수형 컴포넌트가 있다.
한개의 컴포넌트에는 한개의 ReactDOM.render를 사용한다.
컴포넌트는 또다른 컴포넌트를 포함할 수 있다.
인라인 스타일은 자바스크립트언어를 스타일상태 자체를 객체형태로 주입 시켜주려고 {{}} 중괄호를 두개 써준다.
: 원래 들어가는 속성들을 attribute라고 하는데 리액트에서는 props라고 한다. 프로퍼티도 결국엔 객체이다.
{this.props.title}
{this.props.sub}
->이러한 형태들을 지닌다.
: State는 컴포넌트의 상태를 말하며 초기 상태값이 필요하다.
constructor(){
super();
this.state={
toggleState:true
}
}이러한 객체에서 state 초기값을 설정해주고,
밑에 render인 자식요소에서 상태인 요소를 반영해주려고 state 지정해준다.
state만 쓸 경우에는 this.을 굳이 안써도된다.
P.S : 객체로 지역변수처럼 정해주고 사용한다.
state = {
stateBoxColor: "blue",
contents: "wecode",
toggleState: true,
childBackColor: "yellow",
twoColor: "purple"
};
handleColor = () => {
this.setState({
stateBoxColor: "hotPink"
});
};
handleSecondColor = () => {
this.setState({
stateBoxColor: "green"
});
};
handleToggle = state => {
this.setState({
toggleState: !this.state.toggleState
});