본문 바로가기

전체 글153

[React] IF문 삼항연사자/ 클릭하면 동작하는 UI 창 만들기 JSX에서 IF문 사용하기 JSX에서 자바스크립트를 사용하려면 {} 중괄호 안에 넣으면 되는데 IF문이 들어올 수 없다. 그래서 삼항 연사자로 사용한다. { 1 < 3 // 조건식 ? console.log('맞아요') //참일 때 실행할 코드 : console.log('틀러요') //거짓일 때 실행할 코드 } 클릭하면 등장하는 모달창 만들기 1. UI가 보이는/ 보이지 않는 상태정보를 state에 저장한다.(보통 true/false 자료형으로) let [modal, modal변경] = useState(false); 모달창을 켜고 닫는 스위치이다. 2 if문을 이용해 state가 true일 때 UI를 보여준다. { modal === true ? : null //텅빈 HTML이라는 뜻 } state가 tru.. 2021. 7. 22.
[React] ReactDom.render create-react-app을 통해 리액트 프로젝트를 생성하면, 다음과 같은 코드를 index.js에서 볼 수 있다. ReactDOM.render( , document.getElementById('root') ); ReactDom.render 코드는 React 컴포넌트를 웹 브라우저에 렌더링 하는 api이다. 2021. 7. 22.
[REACT] Component Component 란? HTML을 한 단어로 줄여서 사용할 수 있는 문법. 컴포넌트 만들기 1 함수를 만들고 이름을 짓는다. 2 축약을 원하는 html을 넣는다. 3 원하는 곳에 을 입력하고 사용한다. function Modal(){ return( 제목 날씨 상세내용 ); }; //사용할 때 컴포넌트 특징 - 이름은 대문자로 시작한다. - return() 안에 태그 하나로 묶어줘야 한다. - 의미없는 를 사용하기 싫을 때 , 를 사용할 수 있다. - 장점 : 컴포넌트를 사용하면 관리가 편해진다. - 단점 : state를 쓸 때 복잡해진다. 상위 component에서 만든 state를 쓰기 위해 props 문법을 사용해야한다. - 만드는 기준 반복출현하는 html 덩어리들 자주 변경되는 html ui들 다.. 2021. 7. 21.
[REACT] State 데이터 변경 state 데이터 수정하기 1 기존 state의 카피본을 만든다. 이때 Reference Data Type의 특징이 나타나지 않도록 주의한다. 밑의 예시와 같이 state의 값을 직접 건들면 안된다. var newArray = 글제목[0] = 1123123; var newArray = 글제목; //이러한 것들은 복사가 아닌 값 공유의 뜻으로 해석된다. 기존 state의 카피는 Deep copy를 통해 해준다. var newArray = [...글제목]; //글제목의 state에 있는 데이터 배열을 그대로 복사해서 들고온다. Deep copy : 값을 공유하지 않고 서로 독립적인 값을 가지는 복사본을 만드는 것. 2 카피본에 수정사항을 반영한다. newArray[0] = '여자코트 추천'; 3 변경함수에 .. 2021. 7. 21.
[REACT] 이벤트 리스너 이벤트 다루는 법 onClick = {클릭될 때 실행할 함수} onClick = { () => {실행할 내용}} 함수를 변경하고 싶을때 state의 변경함수를 이용해서 재렌더링이 잘 일어난다. /* eslint-disable */ //터미널에 뜨는 warning 안보이게 할때 import React, { useState } from 'react'; //react에 있는 내장함수 하나를 쓰겠습니다. import logo from './logo.svg'; import './App.css'; function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '부산 우동맛집', '파이썬 독학']); let [따봉, 따봉변경] = useState(0); let posts = .. 2021. 7. 21.
[REACT] state 1 리액트의 데이터 저장공간 state 만드는법 - state는 변수 대신 쓰는 데이터 저장공간 - {useState}를 상단에 첨부 - useState()라는 함수를 이용해서 만들어야 한다. - 문자, 숫자, array, object 모두 저장 가능. // array를 저장했을 때 //let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집']); // {글제목[0]} 으로 출력할 수 있다. 2 state에 데이터를 저장해놓는 이유 - 웹이 App처럼 동작하게 만들고 싶어서. - state는 변경되면 HTML이 자동으로 재렌더링 된다. - 그냥 변수로 만들어놓은 HTML은 바뀌어도 자동 렌더링이 안됨. - 제목을 정렬하든가 제목을 수정하면 새고로침 없이도 HTML에 렌.. 2021. 7. 21.
반응형

티스토리툴바