도리쓰에러쓰

예전 Component 문법 최신 Component 문법을 사용하는게 당연히 좋지만, 예전 Component 문법을 알고는 있는게 좋을 것 같아 간단하게 작성합니다. class Profile extends React.Component { constructor(){ super(); this.state = { name : 'Kim', age : 30 } } render(){ return( 프로필입니다 저는 { this.state.name } 입니다. { this.setState({ name : 'Park'}) } }>버튼 ) } } constructor : class의 변수/초기값 저장할 때 사용 state : constructor 안에 작성 this.setState() : 값 변경할 때 사용하는 함수 on..

Props 사용하여 state 값 전달하기 function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학']); return ( ); } function Modal() { return ( 제목 날짜 상세내용 ) } 위 코드에서 App() 컴포넌트에 있는 글제목 state를 Modal 컴포넌트로, 즉 부모 컴포넌트에서 자식 컴포넌트로 state를 props를 통해 전해주도록 하겠습니다. 부모 컴포넌트에서 자식 컴포넌트로 state 전달하는 방법 1. function App() { return ( ); } 2. 자식 컴포넌트에서 props 파라미터 입력 후 사용 function Modal(props) { return ( 제목 : {..

Component 사용하여 코드 간단하게 만들기 function App() { return ( 제목 날짜 제목 날짜 ); } 위와 같은 코드처럼 반복적으로 코드를 작성해야할 때 Component를 아래와 같이 작성합니다. function List() { return ( 제목 날짜 ) } 새로운 function을 만들어 Component를 생성합니다. 관습적으로 함수명은 대문자로 시작합니다. return() 안에 있는건 태그 하나로 묶어서 그 안에서 작성해줘야 합니다. (만약 의미 없는 를 사용하고 싶지 않을 땐 Fragment를 사용합니다. - 아래 글 참고) Fragment 태그 // 방법 1 function List() { return ( 제목 날짜 ) } // 방법 2 function List() ..

useState() 함수 이용하여 좋아요(👍) 버튼 만들기 아래 코드에서 좋아요(👍)버튼을 누르면 숫자가 1씩 증가하는 코드를 구현하겠습니다. 남자 코트 추천 👍 0 2월 17일 발행 useState() 구조 let [state, setState] = useState(initiailState); useState()는 배열로 반환합니다. 배열의 첫번째 요소 (state) : 상태값 저장 변수 배열의 두번째 요소 (setState) : 상태값 갱신 함수 initiailState : state 초기값 App.js에서 맨 윗줄에 useState를 import 해줍니다. import React, { useState } from 'react'; useState() 함수를 이용하여 like 변수는 0으로 초기값을 잡..

1. 리액트(React)란? 페이스북(Facebook)이 만든 사용자를 위한 라이브러리 2. 리액트(React)의 특징 * 컴포넌트(Component) 기반의 라이브러리 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 말합니다. * JSX 문법 JSX는 JavaScript를 확장한 문법이며, JavaScript 안에서 HTML 문법을 사용합니다. 리액트(React)는 JSX 사용이 필수는 아니지만, JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움이 되어 암묵적으로 JSX 문법을 사용하고 있습니다. 아래 코드가 JSX 코드인데, 지금은 대충 이런 구조가 JSX 문법인 것을 확인하기만 하겠습니다. function App() { return ( H..