React란?

React는 페이스북에서 만든 javascript 라이브러리로 코드의 가독성, 재사용성 및 유지보수를 더 용이하게 만들어준다.

🍙 라이브러리란?
재반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것이다. 사용 여부는 코드 작성자 선택사항이며 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않는다.

JSX (JavaScriptXml)

const hi = <h1>Hi</h1>

• javascript의 확장 버전

• React.js를 사용하기 위해 JSX 문법이 포함되어 있으면, 해당 파일을 정규 JS 문법으로 변환시키는 컴파일 과정이 필요하다. (JSX는 javascript 문법과는 다르기 때문에 컴파일 시 브라우저에서 읽지를 못하기 때문)

JSX Element

const hi = <p>Hi</p>;

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

• HTML을 javascript 내에 써준게 JSX.

• 변수에 저장은 물론, 함수의 인자로도 사용 가능!

JSX attribute

const hi = <input readOnly={true} />;

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

• 태그에 속성(attribute)값을 주고 싶을 때는 항상 " "로 감싸줘야 한다.

• 다만, HTML에서 사용하는 속셩명과는 다를 수 있으니,사용 시에는 공식문서를 참고하자.

Renderding

React 또는 HTML 요소(element) 등이 그려저 실제로 눈에 보이느 과정

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

React 요소가 DOM Node에 추가되어 렌더링 되기 위해서 ReactDOM.render 함수가 필요하다.

• 첫 번째 인자 = JSX (React 요소)

• 두 번째 인자 = 첫 번째에서 받은 인자를 render 하고 싶은 container(부모 요소)

Component

• component란 재사용이 가능한 UI 단위이다.

• 동일 코드가 반복되는 부분을 하나의 component로 만들어서 같은 디자인의 요소가 필요할때마다 재사용이 가능하다.

• component는 독립적이고, 재사용 가능한 코드로 관리 가능하다.

• 하나의 컴포넌트에 필요한 HTML, css, JS를 모두 합쳐서 만들 수도 있다.

이러한 Component의 성질은 우리가 알고있는 function과 유사한데, 컴포넌트 역시 인자(input)를 받을 수 있고(props) (react element)가 return 된다.

Component 만들기

• 컴포넌트는 두 가지 방식으로 만들 수 있다.

1. 함수로 컴포넌트 만들기

function Welcome(props){
 return <h1>Hellow {props.name}</h1>; 
}

2. Class로 컴포넌트 만들기

• React.Component를 상속해서 만들어야 한다.

• render()메서드가 필수이며 return도 해줘야 한다.
  - 다른 메서드들도 있으나, 필수는 아니다!

class Welcome extends React.Component(){
	render(){
    	return <h1>Hellow {this.props.name} </h1>
    }
}

🌰 똑같은 컴포넌트라면 함수로 만드는게 더 편한 방식 아닌가 싶다. 성능이나 기능상의 차이점도 추후에 알아봐야 겠다

컴포넌트 사용하기

• 정의한 컴포넌트는 함수 또는 class의 이름으로 사용할 수 있다.

• 우리가 정의한 컴포넌트를 사용할때는 원하는 attribute를 얼마든지 추가할 수 있다.

• 추가한 attribute는 parameter로 전달되어 사용되어 진다. 이를 props라고 하는 것이다.

• .(dot)으로 속성명에 접근가능하고, props.속성명 으로 속성값을 가져올 수 있다.

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// 3. 화면에 React 요소 그려주기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

• App 컴포넌트(부모)에서 내가 만들어준 Welcome 컴포넌트를 사용했다. name이라는 attribute를 사용해 주었다.

• 내가 만들어준 Welcome 컴포넌트는 부모 컴포넌트에서 보내준 attribute name을 props로 받아 사용하였다.

• ReactDom.render 함수로 React 요소를 그려준다. 여기서는 'root'라는 id를 찾아 App 컴포넌트(부모)를 그려주는 것이다.

State

• 말 그대로 component의 '상태값'을 의미한다.

• state / component 둘 다 화면에 나타내줄 정보(상태)를 가지고 있다느 점에서 비슷하다. ( 둘 다 object )

• props는 부모 컴포넌트에서 전달해 주어야만 사용 가능하다.( 함수의 parameter 처럼)

• state는 컴포넌트 내에서 정의하고 사용할 수 있다.

< 예시 >

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')
);

onClick={()=>{this.setState({ clicked: !this.state.clicked })}}

• 버튼 클릭 시 state로 설정해주어었던 상태값을 setState명령어를 통해 상태값을 변경시켜 주는 것이다. true면 false, false면 true!

constructor()

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

constructor() {
  super();

  this.state = {
    clicked: false
  }
}

super() : React.Component class의 메서드들을 사용하기 위해 꼭 붙여줘야 한다.

this.state : 최초에 상태이다. 버튼을 클릭 하기 전 clicked의 상태를 false로 설정.

props와 state

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' : ''}

Button type을 props로 전달해 this.props.type 이 like이면 'like-btn'이 클래스 명으로 바뀌는 것이다.
이를 통해 css 변경 가능!