블로그 만들어 보자

만들기전 React JSX 기본 문법!

1.JSX 문법 1. html에 class 넣을 땐 className

평소에 짜던 html/css 와 다른 부분이 있다.
스타일을 줄때 class가 아닌 className="" 를 사용한다

JSX 문법 2. 변수를 html에 넣을 때는 {중괄호}를 사용한다

ex)
let name = 'wook' 변수를 지정하고

{name}

이런식으로 사용한다! / 데이터바인딩이라고 한다!

JSX 문법 3. html에 style속성 넣는법

ex)

{name}

{속성명: '속성값'} 이렇게 넣어서 사용한다

---

본격적으로 React로 블로그 만들어 보자!

리엑트에선 변수에 데이터 저장을 안해도 state를 만들어서 데이터를 저장할 수 있다!

코function App() {
  const [list, setList] = useState([
    "JavaScript 독학",
    "React 독학",
    "Redux 독학",
  ]);
  const [count, setCount] = useState([0, 0, 0]);
  const [modal, setModal] = useState(false);
  const [title, setTitle] = useState(0);
  const [val, setVal] = useState("");
  let today = new Date();
  let month = today.getMonth() + 1;
  let date = today.getDate();
  let todays = `${month}월 ${date}일 발행`;드를 입력하세요

이런식으로 데이터를 저장해두고 꺼내와서 사용한다

const [list, setList] = useState('')
여기서 setList 는 list를 변경해주는 함수이다 !

코드를 입function handlInput(event) {
    event.preventDefault();
    setVal(event.target.value);
  }
  return (
    <div>
      <div className="HeaderBar">블로그임</div>
      {/* <div className="blogList">
        <h4>
          {list[0]}
          <span
            onClick={() => {
              setCount(count + 1);
            }}
          >
            👍
          </span>
          {count}
        </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="blogList">
        <h4>{list[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="blogList">
        <h4
          onClick={() => {
            setModal(!modal);
          }}
        >
          {list[2]}
        </h4>
        <p>2월 17일 발행</p>
      </div> */}

      {list.map((a, i) => {
        return (
          <div className="blogList" key={i}>
            <h4
              onClick={() => {
                setModal(!modal);
                setTitle(i);
              }}
            >
              {list[i]}
              <span
                onClick={() => {
                  let copy = [...count];
                  copy[i] = copy[i] + 1;
                  setCount(copy);
                }}
              >
                👍
              </span>
              {count[i]}
            </h4>
            <p>{todays}</p>
            <button
              onClick={() => {
                let copy = [...list];
                copy.splice(i, 1);
                setList(copy);
              }}
            >
              삭제
            </button>
          </div>
        );
      })}

      <input onChange={handlInput} type="text" />
      <button
        onClick={() => {
          let copy = [...list];
          copy.unshift(val);
          setList(copy);
        }}
      >
        추가
      </button>

      {modal === true ? <Modal list={list} title={title} /> : null}
    </div>
  );
}

export default App;

function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.list[props.title]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

최종적으로 추가와 삭제기능 모달 기능까지 구현을 해봤는데 자바스크립트보다 훨씬 편한 느낌이 들었다 . 코드도 간축화 된거 같았고 값을 받아올 때 상당히 편했다

rlaxodnr30.github.io >>> 배포까지 해보았다!

---- 완성본