분류 전체보기227 [JS] React에서 자주 사용되는 JS 문법 몇가지 오늘은 React에서 자주 사용되는 JS 최신 문법(es6) 몇가지에 대해 알아보자. 1. Object Shorthand Assignment 예를 들어 name, age라는 2개의 변수와 person이라는 객체가 있다고 가정하자. 그 객체 안의 key와 value의 값은 아래와 같다. let name = "Lee" let age = "20" let person = { name: name, age: age } console.log(person); 콘솔창에 찍어보면 name에 변수 name이 age에는 변수 age가 잘 들어간 것을 볼 수 있다. 위의 경우처럼 key의 이름과 value의 이름이 서로 같다면 아래처럼 위의 코드보다 간결하게 코드를 작성할 수 있다. let name = "Lee" let age.. 2023. 2. 1. [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. 이전 1 ··· 8 9 10 11 12 13 14 ··· 57 다음
