React(props/state)

김지환·2020년 5월 19일
0

Front-end

목록 보기
14/15
post-thumbnail

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로 웹서버를 설치한다.

: 하이퍼텍스트문서를 교환하기 위해 만들어진 통신규약(protocol) HTTP는 TCP/IP기반으로 되어있고, 기본적으로 request/response구조로 되어있다. 그리고 stateless로 상태를 저장하지 않는다. 요청이오면 독립적이고 서로 요청/응답이 연결되어있지 않아서 응답하고 요청하는게 끝이다.

React 구조

node-modules->package.json->gitignore

  • node-modules
    :모듈에 디폴트로 저장되어있는 cra 패키지 소스코드들이있다.
  • package.json
    :안에 dependencies에 패키지랑 버전이 담겨있다.
  • gitignore
    :안에는 dependencies에 깃헙에 올리거나 할때 보이기 싫은 폴더를 써준다.

Component

: UI 구성 단위로 하나 하나의 단위로 클래스형 / 함수형 컴포넌트가 있다.
한개의 컴포넌트에는 한개의 ReactDOM.render를 사용한다.
컴포넌트는 또다른 컴포넌트를 포함할 수 있다.
인라인 스타일은 자바스크립트언어를 스타일상태 자체를 객체형태로 주입 시켜주려고 {{}} 중괄호를 두개 써준다.

  • JSX
    :JS의 확장문법으로 컴포넌트안 바깥에 감싸주는 태그가 있어야되고 그 상위 태그에 class가아닌 className으로 해줘야한다.
  • gitignore
    :안에는 dependencies에 깃헙에 올리거나 할때 보이기 싫은 폴더를 써준다.

Props

: 원래 들어가는 속성들을 attribute라고 하는데 리액트에서는 props라고 한다. 프로퍼티도 결국엔 객체이다.

{this.props.title}

{this.props.sub}

->이러한 형태들을 지닌다.

State

: 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
});

profile
Web Developer

0개의 댓글