개발 일기

props란? 부모 컴포넌트에서의 state를 자식 컴포넌트에서 사용하려고 할 때 {부모에 있는 state이름} 이렇게 대충 들고올 수 없다. props 문법을 이용해서 전송해 줄 수 있다. props로 자식에게 state 전달해주는 방법 1 { modal === true ? : null } 보통 작명은 state명과 똑같이 해주는 편이다. 2 자식 컴포넌트에서 props 파라미터 입력 후 사용한다. function Modal(props){ return( 제목 {props.글제목}> 날씨 상세내용 ) } 사용할 때는 {props.글제목} 이런식으로 props에서 들고와야한다.

리액트에서는 html을 반복문으로 반복시킬 수 있다. map() 함수 개념 array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용. //자바스크립트 표현 var arr = [2, 3, 4]; arr.map(function(a){ return a * 2 }); //(3) [4, 6, 8] arr 내에 있는 데이터들을 파라미터 a에 넣어서 모두 2씩 곱해줄 수 있다. map은 유사 반복문이다. React에서 반복문 쓰는 법 : .map() 우선 JSX 중괄호 내에서 for을 사용할 수 없다. map()은 사용가능하다. 공식 { 반복할데이터.map(() => {return}) } 예제 파라미터에 넣은 '글'은 array 안에 있던 하나하나의 데이터기 때문에 html에 {글}을 넣어주면 array가..

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..

create-react-app을 통해 리액트 프로젝트를 생성하면, 다음과 같은 코드를 index.js에서 볼 수 있다. ReactDOM.render( , document.getElementById('root') ); ReactDom.render 코드는 React 컴포넌트를 웹 브라우저에 렌더링 하는 api이다.

Component 란? HTML을 한 단어로 줄여서 사용할 수 있는 문법. 컴포넌트 만들기 1 함수를 만들고 이름을 짓는다. 2 축약을 원하는 html을 넣는다. 3 원하는 곳에 을 입력하고 사용한다. function Modal(){ return( 제목 날씨 상세내용 ); }; //사용할 때 컴포넌트 특징 - 이름은 대문자로 시작한다. - return() 안에 태그 하나로 묶어줘야 한다. - 의미없는 를 사용하기 싫을 때 , 를 사용할 수 있다. - 장점 : 컴포넌트를 사용하면 관리가 편해진다. - 단점 : state를 쓸 때 복잡해진다. 상위 component에서 만든 state를 쓰기 위해 props 문법을 사용해야한다. - 만드는 기준 반복출현하는 html 덩어리들 자주 변경되는 html ui들 다..

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 변경함수에 ..

이벤트 다루는 법 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 = ..

1 리액트의 데이터 저장공간 state 만드는법 - state는 변수 대신 쓰는 데이터 저장공간 - {useState}를 상단에 첨부 - useState()라는 함수를 이용해서 만들어야 한다. - 문자, 숫자, array, object 모두 저장 가능. // array를 저장했을 때 //let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집']); // {글제목[0]} 으로 출력할 수 있다. 2 state에 데이터를 저장해놓는 이유 - 웹이 App처럼 동작하게 만들고 싶어서. - state는 변경되면 HTML이 자동으로 재렌더링 된다. - 그냥 변수로 만들어놓은 HTML은 바뀌어도 자동 렌더링이 안됨. - 제목을 정렬하든가 제목을 수정하면 새고로침 없이도 HTML에 렌..

react 를 사용하는 이유 - web-app을 만들 때 가장 유용한 라이브러리가 react/angular/vue. - 모바일앱으로 발행이 쉬움 - 앱처럼 뛰어난 ux JSX - Javascript에서 확장된 문법으로 html처럼 생겼으나 다른 문법이다. 1 태그에 class를 주고 싶을때 2 데이터 바인딩(변수, 함수, 이미지, 속성 등 모두 가능) - 서버에서 가져온 데이터를 보여주는 것. - {변수명} 이렇게 그대로 사용해서 가져올 수 있다. function App() { let posts = '부산 고기 맛집'; return ( 개발 Blog {posts} ); } export default App; - {함수} function App() { let posts = '부산 고기 맛집'; functi..