[생활코딩]React

react.png 🎥 생활코딩 YouTube 1. 공부전략 📕 Coding : 개발 환경 설정 및 코드 작성 📗 Run : 작성된 코드를 실행하여 결과 확인 📘 Deploy : 소비자에게 전달 2. 개발환경의 종류 1. 온라인 플레이 그라운드 - 웹에서 바로 코딩하여 결과를 확인할 수 있음 - 예) C...

react.png 🎥 생활코딩 YouTube 1. 리액트가 없다면 🙄 리액트를 사용하는 이유 : 태그를 이름으로 재사용 할 수 있어 대량 생산이 가능하고 가독성이 높다. 2. 컴포넌트 만들기 1) 컴포넌트 생성 - JSX -유사 JavaScript 임 -React는 JSX를 JavaScript Code로 변환...

react.png 🎥 생활코딩 YouTube 1. State 소개 props : 사용자가 제품을 조작하는 장치, 사용자가 컴포넌트를 사용하는 입장에서 중요한 것 state : 제품을 구현하는데에 있는 내부적 조작장치, props의 값에 따라 내부에 필요한 데이터들 2. State 사용 : 실행 될 때 rendor() 함수보다 먼저 실행시켜서 값이...

react.png 🎥 생활코딩 YouTube 1. 이벤트 state,props 그리고 rendor 함수 🎁 이벤트 ? : 애플리케이션을 역동적으로 만들어주는 기술 👉 props, state, event 삼자가 서로 상호작용하면서 애플리케이션의 역동성을 만들기 때문에 같이 생각할 것! 2. 이벤트 설치 3. 이벤트에서 state 변경하기 ( s...

react.png 🎥 생활코딩 YouTube 1. Create 소개 👀 React를 사용해서 어떠한 방식으로 Create 할 것인가? 🖐 정적으로 출력되어있던 메뉴들을 동적으로 추가해보자! 1) mode 변경 기능 " 아래 사진과 같은 controll Button을 생성하여 클릭시 mode 를 변경해주자 " ![web.png](https://s...

react.png 🎥 생활코딩 YouTube 1. Update 구현 " Nav Update 클릭 👉 contents 영역 : 해당 form 으로 변경 👉 내용 변경 후 button 클릭 시 변경 " CreateContent.js를 복사하여 UpdateContent.js 생성 1) form " TOC.js내의 카테고리를 선택한 뒤 update 클릭...