자바스크립트 - React.js

[코딩애플/React.js] input 태그를 활용한 글 생성, 수정 예제 풀이

이 번 회차는 코딩애플에서 내준 과제에 대한 전체 코드 및 아주 간략한 코드 설명 포스팅입니다. /* eslint-disable*/ import { useState } from 'react'; import './App.css'; function App() { let [title, settitle] = useState('부산 우동 맛집'); let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']); let [logo, setlogo] = useState('React Blog'); let [like, setlike] = useState([0, 0, 0]); let [modal, setModal] = useState(false); let [putindex,..

[React.js] props()에 대하여

❗ props( )란? 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체. ✔ props( ) 사용방법 1. 2. props 파라미터 등록 후 props.작명 사용 *파라미터 이름은 아무거나 상관 없음 let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']); return ( //제목1 = 맛있는 우동 ) function ModalUI(props) { return ( {props.modal_title[0]} 날짜 상세내용 ) } (참고1) props는 이렇게 10개 100개 1000개 무한히 전송이 가능하다. (참고2) 꼭 state만 전송할 수 있는건 아니다. 일반 변수, 함수 전송도 가능하고 일반 문자전송은 중괄호 없이 이렇게 해도 된다. ✔ pr..

[React.js] JSX, useState에 대하여

❗ JSX문법 JSX 문법이란 JavaScript 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 React 기본 내장 문법이다. 1. class 선언 대표적으로 두드러지는 문법은 class인데, React에서는 class라는 키워드를 사용할 수는 없고 className이라고 사용해야한다. 2. Data-Binding Data-Binding은 JavaScript 데이터를 HTML에 넣는 작업을 뜻한다. Front-end, Web-App 개발 시 Data-Binding할 작업이 많은데 React는 이걸 매우 쉽게 구현 할 수 있다. // JS // React function App() { let [title] = useState("제목"); return ( {title} ) 이런식으로 중간에 {중..

[React.js] React.js의 map() 반복문

** 중괄호 안에서 if문을 쓸 때는 삼항연산자를 사용할 것. ** 중괄호 안에서 for문을 쓸 때는 map()를 사용할 것. ❗ map() map() 함수는 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 1. array 자료 갯수만큼 함수안의 코드를 실행 해준다. [1,2,3].map(function(){ console.log("1") }) // 1 // 1 // 1 2. 함수의 파라미터는 array안에 있던 자료이다. [1,2,3].map(function(a){ console.log(a) }) //1 //2 //3 3. return에 무언갈 적으면 array로 담아준다. [1,2,3].map(function(){ return "test" }) //["test", "test", "test"] ..

[React.js] React 학습을 시작하기에 앞서 주절주절

드디어 JS ES6 기초를 어느정도 잡고 본격적으로 리액트 공부를 시작 하려한다. React.js를 공부를 시작하게된 계기는 현재 소규모 스타트업 회사에서 Vanilla.js를 사용하여 웹 개발자는 단독으로 프로젝트를 진행중이다. 하지만 나는 계속 성장하고싶고 많은것을 배우고싶고 회사에도 도움이 되고싶다. 물론 Vanilla.js는 분명 강력하지만 성장에 대한 욕구를 충족시켜주지는 못한다. 그래서 내가 먼저 앞장서서 React.js에 대해 학습하고 소규모 프로젝트를 혼자 완수할 수 있을 정도의 레벨을 갖고 왜 React.js를 사용해야하는지에 대해서 면밀히 조사하여 이 회사의 프론트엔드 프레임워크를 React.js로 채택하여 앞으로의 프로젝트에서는 React.js를 사용하여 개발을 진행할 수 있게끔 내가..