15호의 개발자

[React] prop-types 사용법 prop-types는 전달받은 props가 원하는 타입의 props인지 확인해 준다. import React from 'react'; Food.propTypes = { greeting: PropTypes.string.isRequired, name: PropTypes.number.isRequired, } function App() { return ( ); } export default App; greeting은 string이므로 true, name은 number이므로 true가 나온다. isRequied를 적지 않으면 작성한 type뿐만 아니라 undefined일 때도 true가 나온다. propTypes는 코드를 작성 할 때 발생할 수 있는 실수를 줄이는 데 도움..

[React] 리액트의 기초 문법 몇 가지_2탄 '리액트의 기초 문법 몇 가지_1탄'은 아래 링크에서 확인할 수 있다. [React] 리액트의 기초 문법 몇 가지_1탄 [React] 리액트의 기초 문법 몇 가지_1탄 1. 태그는 항상 닫혀있어야 한다 태그는 열린 개수와 동일한 개수만큼 닫혀있어야 한다. HTML에서는 input이나 br 태그의 경우 태그를 닫지 않아도 사용 가능 unit-15.tistory.com 6. props 선언 규칙 import React from 'react'; function Test() { return Hello React } function App() { return ( ); } export default App; HTML에서는 와 같은 형식으로 작성하지만 JSX에서는 와 ..

[React] 리액트의 기초 문법 몇 가지_1탄 1. 태그는 항상 닫혀있어야 한다 태그는 열린 개수와 동일한 개수만큼 닫혀있어야 한다. HTML에서는 input이나 br 태그의 경우 태그를 닫지 않아도 사용 가능하지만 리액트에서는 허용되지 않는다. 태그를 열었으면 그와 매칭되는 태그로 항상 닫아주어야 한다. 단, 컴포넌트와 같이 태그와 태그 사이에 내용이 들어가지 않을 때는 Self Closing 태그를 사용할 수 있다. 이는 태그를 엶과 동시에 닫는다는 의미이다. 2. 함수형 컴포넌트의 이름은 항상 대문자로 시작한다 리액트에서 컴포넌트를 만드는 방식은 두 가지가 있다. 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 이중 함수형 컴포넌트를 선언할 때 함수의 첫 글자는 항상 대문자이어야 한다. import ..

[React] 리액트에서 컴포넌트(component)란? 리액트는 유저 인터페이스 설계를 위한 자바스크립트 라이브러리이다. 리액트를 한 마디로 정의하긴 했지만, 사실 리액트는 그렇게 간단하게 정의내리긴 어렵다. 리액트를 한 줄로 설명할 수 없다면, 리액트를 직접 사용해 보는 것이 무엇인지 정의내리는 것보다 더 의미있을 것이다. 리액트를 사용하면 우리는 컴포넌트를 만들고, 컴포넌트를 보기 좋게 바꾸며, 이 컴포넌트가 데이터를 보여주게 된다. 즉, 리액트에서는 모든 게 컴포넌트이다. 컴포넌트란? (component) 컴포넌트는 html를 반환하는 함수이며, 재사용하기 편한 UI 조각이다. 컴포넌트의 기본 형식은 아래와 같다. 또는 컴포넌트는 항상 대문자로 시작해야 하고, 위와 같은 태그 형식을 Self Cl..

[React] localhost? npm start? React는 코드를 짜면서 실시간으로 수정사항이 바로 반영된다. 이를 localhost:3000에 접속하여 확인해야 한다. localhost:3000은 리액트 앱의 default port 값이다. 이 값은 package.json에서 언제든지 바꿀 수 있다. localhost:3000에 접속하기 위해서는 콘솔 창에서 npm start를 실행해야 한다. 또한 localhost를 계속 유지하고, 실시간으로 refresh되는 것을 보려면 콘솔을 종료하지 않아야 한다. localhost에서 'page not found'라고 뜬다면 이는 서버가 없다는 뜻으로, 서버를 제대로 실행시키지 않았을 가능성이 크다.

[React] props와 state 기본 개념 (+setState, useState) 리액트에서 중요한 두 개념이 바로 props와 state이다. props는 properties(속성)의 줄임말로, 컴포넌트에게 어떤 값을 전달할 때 사용한다. 즉, 부모 컴퍼넌트가 자식 컴퍼넌트에 값을 전달할 때 사용하는 것이다. props에 대한 자세한 설명은 아래 링크에 나와있다. [React] 리액트의 기초 문법 몇 가지_2탄 [React] 리액트의 기초 문법 몇 가지_2탄 '리액트의 기초 문법 몇 가지_1탄'은 아래 링크에서 확인할 수 있다. https://unit-15.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%EA%B8%B0%EC.. uni..