REACT prestudy

WHAT IS REACT?

  • React is a JavaScript library, is used for building UIs and front-end applications.

  • Often called a framework.

  • 선언적 VS 절차적

WHY USE IT?

  • Makes JS much easier, much more interactive, virtual DOM, easy to work with teams.

REACT STATE

  • Components can have state which is an object that determines how that component renders and behaves
  • We can also have "application level" state by using a state manager like Redux or React's own context API.

CREATE-REACT-APP

  • CLI Tool for creating React applications
  • uses Webpack
  • "npm run build" will compile and run

Anatomy of a component

-

React 01. JSX (Syntax Extension for JacaScript)

const hi = <p>Hi</p>;
  • JSX 는 위의 형태를 가진 JavaScript 확장 버전
  • .js 파일내에 작성하지만 문법 오류가 나기 때문에 JavaScript 문법으로 변환시키는 컴파일 과정 필요

JSX Element

  • HTML 문법을 .js 에 작성하는것도 JSX 라 할 수 있음.
    ex)
const hi = <p>Hi</p>;

const myFavorite = {
	food: <li>샐러드</li>,
    animal: <li>dog></li>,
    hobby: <li>programming</li>
};

JSX attribute

  • 태그에 attribte 을 주기 위해서 항상 "" 로 감싸줘야 함.
  • HTML 의 attribute 이름과는 다를 수 있음.
  • 어떤 태그라도 self closing 이 가능함
<div /> 
<div></div> 는 동일
  • class 는 JSX 에서 className 을 사용해야 함.
const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
};
  • 중괄호 {}를 써서 javascript 코드임을 알려준다.

Nested JSX

Rendering

  • html, React elment 등의 코드가 눈으로 볼 수 있도록 그려지는 것.
  • React element 가 DOM node에 추가되어 화면에 렌더하기 위해 ReactDOM.render 함수를 사용
  • 첫번째 argument 에 JSX 로 React element 를 넘기고, 두번째 argument는 해당요소를 렌더 하고싶은 container(parent element) 를 전달.
reactDOM.render{
	<h1>Hello, World!</hi>
    document.getelementById('root')
};

React 02. Components & Props

Component

  • 재사용 가능한 UI 단위.
  • 동일코드가 반복되는 부분을 하나의 component로 만들어 같은 디자인의 코드나 기능이 필요한 곳 마다 재사용이 가능.
  • class 나 function 으로 만듦. 상황에 따라 달라짐
  • ex) function 사용
function Welcome() {
  return <h1>Hello </h1>;
}

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);
  • ex) class 사용
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Component 사용

더 작은 Component로 분리하기

function Comment(props) {
  return (
    <div className="comment">
      <div className="user-info">
        <img className="avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="user-info-name">
          {props.author.name}
        </div>
      </div>
      <div className="comment-text">
        {props.text}
      </div>
      <div className="comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
  • 위 코드에서 더 작은 components 들로 분리하여 원래의 component를 보다 간결하고 그 분리된 작은 components 들을 재사용 할 수 있다.
function Avatar(props) {
  return (
    <img className="avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

  • Avatar 컴포넌트에서 user의 avatarUrl과 name이 필요하므로, Comment 컴포넌트에서 props.author 정보를 user라는 attribute로 넘겨주었습니다. props.author의 avatarUrl, name 값이 user를 통해 전달되었습니다.

  • .user-info 부분을 component 로 분리하는 경우. 

function UserInfo(props) {
  return (
    <div className="user-info">
      <Avatar user={props.user} />
      <div className="user-info-name">
        {props.user.name}
      </div>
    </div>
  );
}
  • 분리 이후, Comment component 는 아래와 같이 간결해짐.
function Comment(props) {
  return (
    <div className="comment">
      <UserInfo user={props.author} />
      <div className="comment-text">
        {props.text}
      </div>
      <div className="comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

React 03. State of Component

State

  • State은 component 의 상태 값을 지칭한다.
  • State & props는 둘다 object 이며 화면에 보여줄 정보(상태)를 가지고 있으므로 서로 비슷한 역할을 수행한다.
  • props는 parameter 처럼 component 를 사용하는 부모쪽에서 전달해야만 사용이 가능하며
    state는 component 내에서 정의하고 사용해야 한다.
class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }
  }

  render() {
    return (
      <div
        className="btn"
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button />,
  document.getElementById('root')
);

  • 상단의 코드는 버튼을 눌렀을때 state 를 변화시켜 화면에 보여지는 텍스트가 "좋아요" "싫어요" 로 클릭할때마다 바뀐다.

  • state 는 여러개 추가가 가능하며 이름은 원하는 대로 짓는다.

  • click 이벤트 발생시 clicked 라는 state 가 수정된다.

  • constructor() 함수는 class 의 instance가 생성될때 항상 호출되는 함수생성자 이다.

constructor() {
  super();

  this.state = {
    clicked: false
  }
}

  • button component 를 그리려면 this.state.clicked 값이 필요한데 최초에는 해당 값이 존재하지 않으므로 constructor 에서 false 값을 지정해 준다.

  • super() 키워드는 React.Component class에 있는 methods( ex. render) 을 사용하기 위해 꼭 필요하다.

  • props 도 추가한 코드

class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }
  }

  render() {
    return (
      <div
        className={`btn ${this.props.type === 'like' ? 'like-btn' : ''}`}
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button type="like" />,
  document.getElementById('root')
);
  • this.props.type 값이 'like'면 like-btn 이라는 class attribute 가 추가됨.

React 04. Lifecycle of React component

  • 위에서 언급한 class로 component 를 생성하면 좋을때가 React.Component class 에서 제공하는 render, componentDidMount, componentDidUpdate 와 같은 메쏘드를 사용할수 있기 때문이다. component 의 lifecycle 에 따라 각자의 method 이 호출된다.
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);
  • 상단의 코드는 1초에 한번 tick function을 호출하여 현재시간을 초 단위로 업데이트함
    --------- 나중에 다시 정리...... 어렵다 후

React 05. Event handling

  • 위에 버튼 코드로 돌아가서, 
onClick={()=>{this.setState({ clicked: !this.state.clicked })}}

를 통해 event handling 을 하는것을 볼 수 있다.

  • event handler 부분을 분리해서 함수를 밖으로 뺄 수 있다.
class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      clicked: !this.state.clicked
    });
  }

  render() {
    return (
      <div
        className={`btn ${this.props.type === 'like' ? 'like-btn' : ''}`}
        onClick={this.handleClick}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button type="like" />,
  document.getElementById('root')
);
  • 이벤트에 event handler 함수를 넘길때 bind 를 해주지 않으면 event handler 함수 내에서 this 의 context를 잃어버려 this 가 undefined 가 되므로 bind(this)를 꼭 해줘야 한다!!
this.handleClick = this.handleClick.bind(this);
알고리즘 study -24-
[1-1]작업환경설정-(ES6)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage