리액트13 [React] React의 state란? state란? 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다. props와 state의 차이점은? (리액트 페이지에 나와있는 내용이다. 자세하게 알고 싶다면 아래 링크) https://ko.reactjs.org/docs/faq-state.html 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org 사용방법 const [state, setState] = useState(initialState); const .. 2023. 1. 30. [React] React의 props 이해하기 props란? properties의 줄임말으로써 컴포넌트의 입력값이다. 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. 사용방법 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 그럼, 저번에 컴포넌트까지 만들어 놓은 코드에 props를 적용해 보자. 아래 코드는 저번까지 했던 코드이다. import logo from "./logo.svg"; import "./App.css"; function Header() { return ( WEB ); } function Nav() { return ( html css js ); } function Article() { return ( Welcome Hello, WEB ); } function .. 2023. 1. 27. [React] React 컴포넌트(component)란? 컴포넌트 리액트는 사용자가 정의한 태그를 만들 수 있다. 그렇다면 어떻게 사용자가 정의한 태그를 만들 수 있을까? 우선, App.js에 아래와 같은 코드를 작성해보자. import logo from "./logo.svg"; import "./App.css"; function App() { return ( WEB html css js Welcome Hello, WEB ); } export default App; 이 코드를 보면 헤더영역, NAV영역, 본문 영역으로 나눠져있고 그 안에 세부적으로 또 코드가 있는 형태이다. 만약 이 코드가 이렇게 적고 단순한 코드가 아니라 굉장히 많은 내용을 가지고 있는 코드라면 하나하나 수정하는데 많은 시간을 소요할 것이다. 우리는 이것들을 정리정돈 할 필요가 있고 같은 영.. 2023. 1. 25. [React] React 코드 수정 방법 https://conquer-it.tistory.com/184 개발환경 구축을 완료하고 터미널에 npm start를 작성하면 많은 파일과 새로운 웹 페이지가 만들어진 것을 볼 수 있다. React 수정하는 법! 우리가 npm start를 작성하면 src안에 있는 index.js를 동작시킨다. 그렇다면 index.js에는 어떤 코드가 있을까? import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document... 2023. 1. 23. 이전 1 2 3 4 다음
