개발하는 망나뇽 개발하는 망나뇽

React

• 옛날 React문법

  React 2022. 3. 10. 13:26

  이미 만들어진 react를 다루게 되는 일이 있을테니 옛 react문법을 알아보자. function App(){ return ( HTML 잔뜩있는 곳 ) } class Profile extends React.Component { constructor(){ super(); this.state = { name : 'Kim'}; //state는 이런 식으로, this를 붙여 만들 수 있다. } changeName(){ this.setState( {name : 'Park'} ) } //함수를 만드려면 위처럼 만들고, 사용할 때 this.함수명 으로 사용한다. //만약 에러나면 this.함수명.bind(this)로 쓰기 //아니면, 함수를changeName = () => {}로 만들기 이러면 상위의 this값을 ..

  Read More
• input다루기

  React 2022. 3. 8. 21:14

  먼저, 사용자가 입력한 input값을 state로 저장해보자. 저장공간이 필요하기에 빈 state를 먼저 만든 후, let [입력값, 입력값변경] = useState(''); { e.target.value } } /> input태그에 onChange를 달아 내부의 파라미터에 e를 쓰고 e.target.value를 쓰면 사용자가 입력한 값이 나온다. console.log(e.target.value)를 하면 input태그에 값이 변경될 때마다 콘솔창에 뜨게 된다. 이제 state에 저장하려면 { 입력값변경(e.target.value) } } /> 입력한 값을 입력값변경인 state 변경함수로 바로 바꾸어주면 된다. 만약, 블로그처럼 값을 입력해 저장을 누르면 글 리스트에 추가가 되는 UI를 만들고 싶으면 다..

  Read More
• props 자식이 부모의 state 사용할 때

  React 2022. 3. 7. 13:17

  function App () {}에 속해있는 state를 component문법을 이용해 만든 function Modal() {}에서 사용하고 싶을 때가 있다. App은 부모 컴포넌트 Modal은 자식 컴포넌트라고 한다. 사용방법은 이렇게 자식 컴포넌트에 작명={state명}을 써준 후, 자식 컴포넌트에서 function에 props 파라미터를 입력하고, 사용할 때 {props.state명}으로 사용한다. 예를 들면, function App() { let [글제목,글제목변경] = useState(['남자 코트 추천', '코딩 인강 추천', '데이트 맛집 추천']); let [모달, 모달변경] = useState(false); return ( { 모달 === true ? : null } ); } functi..

  Read More
• map : html반복문

  React 2022. 3. 7. 12:58

  map 함수는 원래 array내의 데이터에 똑같은 처리를 할 때 사용한다. 예를 들면, var array = [2,3,4] var newArray = array.map(function(a) { return a * 2 } //보통 새 변수에 담아서 사용 이렇게 사용해 a에 모두 2씩 곱해 array란 배열을 4,6,8로 만든다. 이런 원리로, map으로 반복문을 쓰는 원리는 반복할데이터.map( () => { return } ) } 또는 반복할데이터.map(function () {return })로 쓰면 된다. let [글제목,글제목변경] = useState(['남자 코트 추천', '코딩 인강 추천', '데이트 맛집 추천']); { 글제목.map(function(a) { return ( //맥에선 파라미터..

  Read More
• if문 대신 삼항연산자

  React 2022. 3. 5. 02:31

  JSX안의 { } 에 조건문을 써야하는데 리액트의 { }중괄호 안에서 if문을 사용할 수 없기에 삼항연산자를 사용해야 한다. { }안에 조건식 ? 참일 때 실행코드 : 거짓일 때 실행코드 이런 식으로 적어준다. 예를 들면, { 1 < 3 ? console.log('맞아요') : console.log('틀려요') } 이렇게 사용하면 된다. 그래서 응용으로 어떤 h3태그를 눌렀을 때 모달창을 보여주세요 라고 코드를 짜보자. 우선, 리액트에선 UI를 만들 때 state 데이터를 이용한다. 버튼이 true인지 false인지도 state를 이용해 만들어보면, let [modal, modal변경] = useState(false); 이렇게 만든 후, { modal == true ? : null } 이렇게 적어, mo..

  Read More
• 많은 div을 한 단어로 줄이는 component문법

  React 2022. 3. 5. 00:27

  리액트에서 html구조를 짤 대 return안에는 여럿 div를 만들면 안된다. return { } 이렇게 짤 순 없고, 한 div로 묶어서 사용해야한다. 이렇기에 div가 많아질 수 밖에 없는데, 이럴때 유용한게 component라는 문법이다. 먼저, function App( ) { } 의 밖에 함수를 만들고 이름을 지은 후, 축약할 html을 넣고 원하는 곳에서 사용해주면 된다. 예를 들면, function Modal() { return ( 제목1분 42초 날짜 상세내용 ) } 이런 식으로, 만든 후, //이렇게 사용해도 같음 이렇게 사용하면 된다. component유의사항으론 1. 이름은 대문자로 시작하게 하며, 2. return 소괄호 안에도 div태그여러개 나열은 불가능하며, 만약, 의미없는 d..

  Read More
• 버튼을 만들고 클린된 횟수 count (state 변경)

  React 2022. 3. 4. 02:29

  먼저, 이런 식으로 손모양과 카운트 횟수를 만든다. {글제목[0]} 👍 0 2월 17일 발행 그 다음에, 따봉모양을 클릭하면 숫자가 올라가야 하는데, 클릭을 감지하는 방법으로 onClick={클릭될 때 실행할 JS함수} 또는 ={ () => {실행할 내용} } 을 사용할 수 있다. 단, 함수를 사용할 땐 ()를 쓰면 안된다. ()를 쓰면 바로 실행해주세요 이다. function App() { let [글제목,글제목변경] = useState(['남자 코트 추천', '코딩 인강 추천', '데이트 맛집 추천']); let [따봉,따봉변경] = useState(0); return ( {글제목[0]} {따봉변경}}>👍 {따봉} 2월 17일 발행 ); } 위 처럼, span태그에 onClick을 달아주고 따봉을 클..

  Read More
• State

  React 2022. 3. 3. 13:34

  데이터를 저장하는 방법은 두 가지가 있다. 1. 변수에 넣거나 2. state에 넣거나 리액트의 저장공간인 state를 만드는 방법은 먼저 상단의 import React from 'react';에 useState를 추가해준다. import React, { useState } from 'react'; 이런 식으로 쓴 후, useState('데이터'); 이렇게 사용한다. 이 함수를 실행하면 여기에 어레이 [a, b]가 남고 여기서, a는 데이터가 그대로 들어가고, b는 이 데이터를 수정하기 위한 함수를 생성해준다. 그래서, 총 2가지 데이터가 남기 때문에, 신문법을 이용해 각각 a,b에 let [a,b] = useState('남자 코트 추천');//ES6 destructuring 신문법 //destructu..

  Read More