필기20 [React 기본] 6. state 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅은 이전의 포스팅과 이어집니다. 2022.07.07 - [Develop/react] - [React 기본] 5. event [React 기본] 5. event 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅은 이전의 포스팅과 이어집니다. 2022.07.07 - [De tarra.tistory.com + 생활코딩의 react 강의를 기본 베이스로 이것저것 추가 작성 필기입니다. 영상을 보고싶다면 다음의 링크를 접속해 보시는 것을 추천합니다.! https://ope.. 2022. 7. 7. [React 기본] 5. event 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅은 이전의 포스팅과 이어집니다. 2022.07.07 - [Develop/react] - [React 기본] 4. props + 생활코딩의 react 강의를 기본 베이스로 이것저것 추가 작성 필기입니다. 영상을 보고싶다면 다음의 링크를 접속해 보시는 것을 추천합니다.! https://opentutorials.org/course/4900 React - 생활코딩 리액트 입문자를 위한 수업입니다. 기본 문법과 핵심 개념을 익힐 수 있습니다. 만들게 될 것 앱 : https://egoing.github.io/react-2022-tutorial-src/ 소스코드 : ht.. 2022. 7. 7. [React 기본] 3. 컴포넌트 만들기 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅부터는 리액트의 여러 기능과 구현에 대해서, 이해하기 쉽도록 파트별로 설명을 해볼 생각이다. 그 중에서 우리가 페이지를 만드는 부품인 컴포넌트에 대해 먼저 알아보도록 하자. component (컴포넌트) 앞선 포스팅에서 리액트의 본질은 "사용자 정의 태그를 만들어 활용하는 것" 이라고 했다. 이 사용자 정의 태그를 의미하는 것이 컴포넌트이며, 다음의 코드를 봐보자. html의 시멘틱 태그인 header, nav, article이 있다. 만약 이 태그들이 몇백, 몇천의 코드를 가지고 있다고 생각하면 우리가 지금 작성하고 있는 App이라는 function이 관리하.. 2022. 7. 7. [React 기본] 2. JSX 문법 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 들어가기에 앞서. 앞선 포스팅에서 우리가 계속해서 다루게 될 파일이라고 한 App.js를 봐보자. 뭔가 이상한 점을 확인할 수 있다. 그건 바로 javascript 파일 안에 html 문법이 있다는 것인데 놀랍게도 이 코드는 정상적으로 작동한다. 이 문법은 react에서 사용하는 JSX라고 하며 쉽게 말해 개발자들이 리액트를 좀 더 쉽게 개발하기 위해 html과 js를 섞어놓았다고 생각하면 된다. 물론 JSX 문법을 사용하지 않을 수도 있으며 이 경우에는 React.createElement('div', null, "Hello, World!") 와 같은 방법으로 코드를 .. 2022. 7. 6. 이전 1 2 3 4 5 다음
