[SEB_FE_44] React(3) - React State & Props 1

오늘 배운 주제

---

• React State & Props
• React Twittler State & Props

오늘 배운 내용

---

• props

props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당

props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값입니다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체입니다. 함부로 변경되지 않아야 하기 때문

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};

• state
  컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 합니다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

• onChange

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

• onClick

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

오늘의 과제

---

React Twittler State & Props

• Tweets.js

const Tweets = () => {
  const [isUser, setIsUser] = useState("");
  const [isMsg, setIsMsg] = useState("");
  
  const handleButtonClick = (event) => {
  	const tweet = {}; // 과제 실패
  }

  const handleChangeUser = (event) => {
    setIsUser(event.target.value);
  };

  const handleChangeMsg = (event) => {
    setIsMsg(event.target.value);
  };

  return (
    <React.Fragment>
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile">
            <img src="https://randomuser.me/api/portraits/men/98.jpg" />
          </div>
          <div className="tweetForm__inputContainer">
            <div className="tweetForm__inputWrapper">
              <div className="tweetForm__input">
                <input
                  type="text"
                  defaultValue="parkhacker"
                  placeholder="your username here.."
                  className="tweetForm__input--username"
                  onChange={handleChangeUser}
                  value={isUser}
                ></input>
                <textarea
                  placeholder="여기는 텍스트 영역입니다."
                  className="tweetForm__input--message"
                  onChange={handleChangeMsg}
                  value={isMsg}
                ></textarea>
              </div>
              <div className="tweetForm__count" role="status">
                <span className="tweetForm__count__text">
                  {'total: ' + dummyTweets.length}
                </span>
              </div>
            </div>
            // 과제 실패
            </div>
          </div>
        </div>
      </div>
      <div className="tweet__selectUser"></div>
      <ul className="tweets">
        // 과제 실패
      </ul>
      <Footer />
    </React.Fragment>
  );
};

export default Tweets;

역시 state & props !

반 년전 리액트를 공부했을 당시 state와 props가 이해가 안되서 고생을 했던 개념이다.

이번 과제로 접했을 때는 과제 퀄리티도 높았고 난이도도 생각보다 높지 않았음

과제는 월요일에 하루종일 할 수 있어서 성급하게 하지 않았고, 주말 스터디를 이용해 state를 완벽하게 이해하고 설명할 수 있는 수준까지 공부할 생각이다.