๐Ÿ‘‰ React์˜ onChange

input ํƒœ๊ทธ์— onChange๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ํ‚ค ์ž…๋ ฅ ์‹œ๋งˆ๋‹ค ๋ฐœ์ƒ

import React from "react";

const Search = props => {
  return (
    <div className="search-bar form-inline">
      <input
        id="form-control"
        type="text"
        onChange={e => props.onSearchChage(e.target.value)}
      />
      <button className="btn hidden-sm-down">
        <span className="glyphicon glyphicon-search"></span>
      </button>
    </div>
  );
};

export default Search;

ํ•ด๊ฒฐํ•ด์•ผํ•˜๋Š” ์  : ํ‚ค ์ž…๋ ฅ ์‹œ๋งˆ๋‹ค ๊ฒ€์ƒ‰์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฒ€์ƒ‰์–ด๊ฐ€ ์™„์„ฑ์ด ๋ ๋•Œ ๊ฒ€์ƒ‰์ด ๋  ์ˆ˜ ์žˆ๋„๋ก ์ˆ˜์ • or ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๊ฒ€์ƒ‰ํ•˜๋„๋ก ์ˆ˜์ • ํ•„์š”

โœ” dangerouslySetInnerHTML ๋ฌธ์ œ

โœ” React์—์„œ์˜ ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ