StudyReact

React를 활용해 빠르게 React를 사용해보는 법입니다.HTML태그에 위의 Script를 넣어주면 HTML 내에서 빠르게 React를 사용해 볼 수 있습니다.React는 render를 통해 html태그에 직접 태그를 넣지 않고도 html태그를 작성할 수 있습니다.

React를 이용해서 React.createElement() 안에 3가지 인자를 기억하는 것은 너무 불편합니다.그렇기에 JSX를 통해 HTML태그와 비슷한 문법으로 React를 사용할 수 있는 방법을 알아보도록 하겠습니다.JSX를 브라우저가 인식할 수 있도록 cdn을

React로 만든 Button Component에 onClick 이벤트로 count 값을 올려주고 싶습니다.이렇게 Button이란 컴포넌트에 onClick 이벤트로 count값을 출력하고 count값을 1 증가시켜줍니다.그럼 console.log 값은 1씩 계속 증가되

React로 input값을 건드리기 위해서는 작업이 필요합니다.React에서는 input값이 unchangable하기 때문입니다.간단하게 컴포넌트 안에 input태그를 설정하고 value의 초기값을 0으로 두면 그 이후로는 값이 변하지 않는 것을 알 수 있습니다.그렇기

React 컴포넌트들은 사실 함수라는 것을 이야기 했었습니다.그렇기에 React 컴포넌트에도 인자들을 넣어줄 수 있다는 생각을 해볼 수 있습니다.이런 버튼 컴포넌트가 있다고 해봅시다.이 컴포넌트를 App 컴포넌트에 넣어주고 App 컴포넌트를 rendering해줄겁니다.

useState를 사용하여 state를 변경할 때, 컴포넌트의 모든 코드가 reRendering 됩니다.소스코드가 작을 때는, 크게 문제가 되지 않을 수 있지만 컴포넌트 안에 API를 불러오는 등 외부 작업이 일어난다든가, 무거운 작업이 생길 때 이 모든 코드들을 다시

React로 to Do list를 만들어보도록 하겠습니다.일단 to Do를 입력할 form을 만들어줍니다.input 태그를 활용하기 위해서는 state값을 만들고 onChange 이벤트를 넣어줘야 한다는 것을 우리는 이미 알고있습니다.toDo 변수는 state로 만들어