JSX & State란 무엇인가 + Form & Input

📌JSX란

Javascript를 확장한 문법이다. HTML과 유사한 형태로 React 개발자 입장에서 편리하게 사용한다.

const h3 = React.createElement(
  "h3",
  {
    onMouseEnter: () => console.log("mouse enter"),
  },
  "Hello I'm a h3"
);

위와 같은 형태의 컴포넌트는 아래와 같이 JSX를 통해 HTML과 유사한 형태로 사용한다.

const Title = (
  <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
    Hello I'm a h3
  </h3>
);

const Button = (
  <button
    style={{ backgroundColor: "blue" }}
    onClick={() => console.log("clicked")}
  >
    Click
  </button>
);

style을 지정해서 사용도 가능하다. 반드시 {}가 두 번 감싸지는 형태여야 적용된다.
이렇게 JSX로 짜여진 코드는 아래처럼 변환되어 브라우저가 이해할 수 있게 된다.

HTML 태그와의 혼동을 없애기 위해 컴포넌트의 첫 글자는 반드시 대문자여야 한다. (ex, Title, Button)
 
for, class와 같은 단어는 자바스크립트에서 이미 사용되는 것이기 때문에, JSX에 맞게 사용을 해주어야 한다.
class → className
for → htmlFor
 

📌 State

State란, 기본적으로 데이터가 저장되는 곳을 의미한다.

const data = useState(0);
console.log(data);

data의 첫 번째 요소(0)는 0이고 두 번째 요소(f)는 함수를 의미하는데, 이 함수는 해당 값을 바꾸는 함수이다.
따라서, 첫 번째 요소를 활용하고자 data[0]과 같은 형태로도 사용이 가능하지만, 아래와 같이 빈 arr에 변수명을 지정해주어 사용하는 방식을 더 자주 사용한다.

const [data, setData] = useState(0);

setData가 실행되면 렌더링이 자동으로 이루어진다.
또한, 렌더링이 되었을 때, 모든 부분이 재실행되는 것이 아닌, 필요한 부분만 바뀌어 렌더링된다. (ReactJS의 장점)

 
지금 현재 data의 값을 확실하게 변동하기 위해 아래처럼 사용을 해주면, 현재 값을 보장하기 때문에 더 안정적으로 변동이 가능하다.

setData((current) => current + 1);

 

input에 담긴 값 가지고 오기

const onChange = (event) => {
  console.log(event);
};

event의 tartget이 input을 나타내고 있다. 따라서, event.taret.value로 해당 값을 가지고 올 수 있다.
 

📌Form & Input

const onSubmit = (event) => {
    event.preventDefault(); // 새로고침 방지
    console.log(todo);
    if (todo === "") {
      return;
    }
    setTodos((currentArray) => [todo, ...currentArray]);
    setTodo("");
  };

form에서 onSubmit은 제출하는 버튼을 클릭 시 자동으로 창이 새로고침되는데, 이를 event.preventDefault 를 통해 방지할 수 있다. 제출과 동시에 기존 투두리스트와 합쳐질 수 있도록 한다.

setTodos((currentArray) => [todo, ...currentArray]);

...을 붙여 기존 리스트를 가져와서 새로운 todo가 앞에 붙여지도록 한다.
… 를 앞에 붙여주지 않으면, [todo, [a, b, c]]의 형태가 되므로 붙여주도록 한다.
 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders