Web23 [React] Component에 스타일 추가하기 [React] React 시작하기 create-react-app create-react-app이라는 CLI 도구는 많은 스크립트와 사전 설정(개발서버 접근, 새로고침, css포함 등)을 준비해줌으로써 ReactJS어플리케이션을 만들기 쉽게 도와준다. 리액트 프로젝트를 yeoeun-ji.tistory.com 지난 포스팅에 이어 버튼 컴포넌트를 추가하여 버튼 스타일을 추가해보자. 우선, create-react-app으로 생성된 src 디렉터리 밑에 버튼 컴포넌트 파일을 생성한다. Button.js function Button({text}){ return {text}; } export default Button; App.js파일에서 생성된 Button컴포넌트를 import하고 사용한다. App.js impor.. 2022. 1. 29. [React] React 시작하기 create-react-app create-react-app이라는 CLI 도구는 많은 스크립트와 사전 설정(개발서버 접근, 새로고침, css포함 등)을 준비해줌으로써 ReactJS어플리케이션을 만들기 쉽게 도와준다. 리액트 프로젝트를 시작하는 방법은 다음과 같다. 1. nodejs 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org nodejs 다운로드하고 콘솔창에 'node -v' 입력 후 설치를 확인한다. 버전 정보가 출력되면 설치 완료. 2. npx 설치 npm 과 npx 차이 npm은 node.js의 자동화된 의존성과 패키지 관리를 위한 패.. 2022. 1. 29. [React] Props Props Props는 Properties의 약자로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달할 때 사용된다. Props는 변하지 않는 데이터이다. 1. props 지정 props는 상위 컴포넌트에서 하위 컴포넌트의 속성처럼 사용된다. function App (){ return( ); } 위 코드는 함수형 컴포넌트이다. Btn의 부모 컴포넌트인 App 컴포넌트 안에서 Btn 컴포넌트의 props인 text와 fontSize값을 지정하여 함께 호출해준다. 2. props 사용 보통 props 값을 사용할 때 props.text, props.fontSize와 같이 props. 키워드를 붙여 사용하는데 아래 코드와 같이 비구조화 할당 문법(구조 분해 문법)을 사용하여 내부 값을 추출할 수 있다. 즉, .. 2022. 1. 27. [React] State State state는 데이터가 저장되는 곳으로 유동적인 데이터를 다루기 위한 객체이다. component 내에서만 정의 가능하며 값의 변경이 가능하다. 데이터가 변경될 때 업데이트하는 방법 1. render() 함수를 이용해서 UI를 새로고침(리렌더링) 컴포넌트 내 값의 변경이 있을 때 새로고침이 필요한 곳에 render() 함수 사용. -> 모든 코드가 재생성되는 단점이 있다. ReactDOM.render(,root); 2. useState() 함수 사용 React.useState() 함수를 통해 state를 사용한다. 함수형 컴포넌트에서 가변적인 상태 관리가 가능하다. const [state 변수, state값 변경 함수] = React.useState(state 초기값) useState 함수는 배.. 2022. 1. 27. [React] Component Componenet 컴포넌트란 리액트를 이루는 최소 단위, 하나의 의미를 가진 독립적인 단위 모듈로 사용자가 정의하여 HTML 태그와 비슷하게 사용된다. 컴포넌트를 이용하면 소프트웨어의 재사용성과 유지보수가 쉽다. 컴포넌트 사용 방법 버튼를 반환해주는 Btn 컴포넌트를 정의해보자. 단, 리액트에서 소문자로 시작하는 컴포넌트는 DOM태그로 인식하기 때문에 컴포넌트의 이름은 항상 대문자로 시작한다. 함수형 컴포넌트로 정의하는 방법 function Btn({text}){ return( {text} );} 클래스형 컴포넌트로 정의하는 방법 class Btn extends React.Component{ render(){ return( {text} ); } } 위에서 주황색 배경과 흰색 글자 스타일의 버튼 컴포넌트.. 2022. 1. 27. 이전 1 2 3 4 다음
