React6 6. React - props (read only)&& react 기초 실습 이번 글에서는 props를 이용해서 저번에 코딩한 부분을 출력해보도록 하겠습니다. props는 예전 createElement()에서 2번째 파라미터에 해당한다고 말씀 드렸었는데요. 기억이 안나시는 분은 https://diarycafe0729.tistory.com/44 에서 다시한번 읽어보시는 걸 추천드립니다. 3. React - Hello World (Element rendering) 이제부터 본격적으로 React를 시작해보려고 합니다. 당분간은 React의 기본 개념을 익히기 위한 진행을 하려고 합니다. 아래는 기본 개념으로 만든 화면입니다. element, props, state, function 등을 일부�� diarycafe0729.tistory.com props는 컴포넌트간의 통신을 가능하게 해.. 2020. 6. 22. 5. React - function component(함수 컴포넌트), react 기초 실습 React에는 두 종류의 컴포넌트가 존재합니다. 함수 컴포넌트(function component)와 클래스 컴포넌트(class component) 입니다. 두 컴포넌트의 차이점은 클래스 컴포넌트는 React.Component라는 부모 클래스를 상속받기 때문에 함수 컴포넌트에 비해 더 많은 기능을 갖는다는 점입니다. (두 컴포넌트가 무엇인지는 이따가 밑에서 설명드릴게요~실습하면서) 그러나 기능이 많다고 무조건 클래스 컴포넌트를 사용하지는 말아야 합니다. 그 이유는 클래스 컴포넌트가 기능이 많은 만큼 메모리와 리소스를 많이 사용해야 한다는 뜻이기 때문입니다. React관련 글 초반에 작성하기로 했던 부분을 지금부터 조금씩 진행하려고 합니다. 처음에 계획했던 것에서 좀 바뀌는 부분이 있을 수 도 있습니다. 기.. 2020. 6. 21. 4. React JSX(JavaScript Xml) 문법 JSX(JavaScript Xml)? JSX는 JavaScript Xml의 약자입니다. JSX를 설명하기 앞서 XML에 대해서 간단하게 정의하려고 합니다. XML은 Extensible Markup Language의 약자이며, 사람과 기계가 동시에 읽기 편한 구조로 되어있다는 것이 특정입니다. 그러나 XML은 HTML처럼 데이터를 보여주는 목적이 아니라, 데이터를 저장하고 전달하는 것이 목적입니다. XML의 주요 특정은 5가지 입니다. 1. 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어 2. 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환 3. 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성 우수 4. 데이터를 보여주지 않고, 데잉터를 전달하고 저장하는 것만을 목적 5. .. 2020. 6. 19. 3. React - Hello World (Element rendering) 이제부터 본격적으로 React를 시작해보려고 합니다. 당분간은 React의 기본 개념을 익히기 위한 진행을 하려고 합니다. 아래는 기본 개념으로 만든 화면입니다. element, props, state, function 등을 일부러 사용했어요. 주의하실 점은 이것은 실제 프로젝트처럼 해보기 위한 것이 아니라 React의 기본 개념을 최대한 사용하면서 반복 숙달하기 위한 한 것이기 때문에 실제 프로젝트에서도 이렇게 하면 문제가 생길 거예요. CSS 또한 그냥 틀만 잡기 위한 식으로 별 조건 없이 만들어 낸 것입니다. 또한, 이것은 create-react-app을 사용해서 만든 것은 아니에요. create-react-app을 이용하는 것은 아래 개념을 통한 실습이 끝나고 나서 진행하려고 하니 참고해주시면 될.. 2020. 6. 18. 1. React란? + (정적&동적 웹페이지, 동기&비동기, Virtual DOM, SPA, TypeScript) 글을 작성하기 전에 먼저 이 글을 쓰는 목적을 알아주셨으면 합니다. 이 글을 제목에 명시 된 것들을 깊숙이 들어가 파헤치자의 의미로 작성된 글이 아닙니다. React를 진행하면서 기본적으로 알고 있으면 좋겠다 하거나 요즘 트렌드로 웹 개발을 하면서 자주 등장하는 용어를 간단하게 무엇인지를 대략적으로 알 수 있도록 설명한 글입니다. 저처럼 비전공자이면서 시작한지 얼마 안 되신 분들이 개발을 진행하면서 대략적인 설명도 없이 코딩을 하고 계신 분들이 많을 것 같아서 조금이나마 도움이 되고자 작성한 글입니다. 초보자의 입장에서 쓴 글로 예시를 통해 이해할 수 있도록 작성하였으며, 해당 항목의 기초적인 부분을 대략적으로 이해함으로써 개발을 진행하면서 아~이런 의미였구나라고 문뜩 떠오를 수 있도록 하여 기본 개념을.. 2020. 6. 15. 0. React 시작 안녕하세요. 오늘부터 React에 대해서 공부를 하려고 합니다. 공부하면서 같이 블로그에 올려서 공유하고 싶어요. 이클립스로 간단한 게시판을 만드는 것을 올리려고 했는데... 이것부터 하게 될 것 같아요. 사실 개인적으로는 간단한 게시판은 만들었는데 블로그에 올리려면 정리하고 해야 해서 올릴 수가 없겠더라고요. React를 시작한 계기는 우연하게 React 기초 강의를 들을 수 있게 되어서에요. 사실 React보다는 Vue에 더 관심이 많았는데, React도 해보는 것도 나쁘지 않을 것 같단 생각이 들어서 듣겠다고 신청했어요. 그리고 강의를 들었는데 React를 하고 Vue를 하는 게 더 좋다는 말씀을 하시더라고요. 강의는 첫 부분은 WebStorm을 이용해서 진행하려고 해요. 저는 무료 30일 판을 이.. 2020. 6. 15. 이전 1 다음
