React11 [React] React를 통한 간단 댓글구현 저번 포스팅에 이어서 이번에는 React를 이용한 간단한 댓글쓰기를 구현해보도록 하겠습니다. CSS는 참고만 해 주시면 감사하겠습니다! 작업하기전에 저같은 초보자들은 많이 헷갈리니까 관계도.. 트리를 그려서 `상태 끌어올리기` 관계를 잘 확인합니다 React 작업 전 생각해야 할 것들 1. Component 구성 허접하지만.. 그림판으로 그려봤습니다.. 최상위 root 인 App을 시작으로 뻗어나가고있습니다. 이그림을 Tree라고도 하며 처음 접할때는 많이헷갈리니 그림을 그리며 파악해나가는게 좋을듯합니다. 2. 상태 끌어올리기 `상위 컴포넌트의 상태 변경 함수 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 필요.. 2023. 2. 22. [React] React의 사용방법 간단예제 (2) 이전 포스팅에 이어서 간단한 간단 예제를 만들겠습니다. 기존 DOM 방식을 사용하여 1. 버튼을 하나만들고, 2. 버튼이 클릭될때마다 3. Login , LogOut 으로 바뀌는 코드를 작성해보겠습니다! 간단하게 div 하나를 만들어준 뒤에 , document.querySelector()를 사용하여 해당 엘리먼트를 선택 하였고 document.createElement('button')을 이용하여 버튼을 생성하였습니다! 버튼을 클릭하면 이벤트가 발생되며 , e.target.innerHTML에 따라서 Login / LogOut으로 바뀌는 로직입니다. 위의 DOM 형식을 -> React로 만들어 보겠습니다! 코드 해석을 해드리면 1. React를 사용하기 위해서 script CDN 3개를 불러왔습니다 1-1).. 2023. 2. 22. [React] React 란? 사용방법 소개 (1) 안녕하세요 오늘은 React에대해서 알아보도록 하겠습니다. 1. React 란? / JSX,Babel 에대해 / 생명주기(LifeCycle)에 대해 2. 간단한 React의 사용방법 1. React 란? / JSX,Babel 에대해 / 생명주기(LifeCycle)에 대해 Google에 React를 검색해보면 나오는 정의는 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 라고 소개가 나와있습니다. 자바스크립트 라이브러리의 `하나` 로써 , 사용자 인터페이스를 만들기위해 사용됩니다! 우리가 흔하게 알고있는 HTML의 문서에 접근.. 2023. 2. 21. 이전 1 2 3 다음
