JS/React (6) 썸네일형 리스트형 React 공식문서 보기 - 3 (Component, props) 1. Component 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트로 나뉜다. function Welcome(props) { return Hello, {props.name}; } 위와 같이 생긴 모양이 함수 컴포넌트다. class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 이 모양은 클래스 컴포넌트다. 상태가 있으면 클래스 컴포넌트를 쓰고 상태가 없으면 함수형 컴포넌트를 쓴다. 이와 관련된 내용은 state(상태)부분을 볼 때 자세히 보자! 위에서 만든 Welcome (클래스 컴포넌트) 는 아직 엘리먼트는 아니다. 그저 리액트의 클래스일 뿐이다. 이 때, 전 게시물에서 배운 JSX를 통해서 엘리먼트로 반.. React 공식문서 보기 - 2 (JSX, 엘리먼트 렌더링) 1. JSX 문법 const element = Hello, world!; 마치 마크업 문법같이 생긴 이 문법은 JSX라고 한다. JSX는 React.createElement() 함수 호출로 바뀐다. const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 위의 두 가지 코드는 동일하다. 첫 번째 코드는 JSX로 표현한 코드고 두 번째 코드는 React.createElement()를 사용한 코드다. JSX를 사용해서 쓰는것이 코드의 가독성도 좋고 HTML과 모습이 닮아서 보다 쉽게 코드를 작성할 수 있다. 2. 엘리먼트 렌더링 처음 리액트 프로젝트.. React 공식문서 보기 - 1 (React 앱 만들기, Hello World) React 공식문서를 보고 하나씩 정리해보겠다. 1. 새로운 React 앱 만들기 (https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html) npx create-react-app my-app 터미널에 위 명령어를 입력하면 자동으로 my-app이라는 React app을 생성해준다. 이름은 바꿔도 무방하다 (my-app) my-app 폴더로 이동해서 (cd my-app) npm start를 입력하면 react 첫 화면을 볼 수 있다. cd my-app npm start 주요 개념 - 1. Hello World (https://ko.legacy.reactjs.org/docs/hello-world.html) 생성된 my-app 폴더의 src에 index... React : component에게 인자 넘겨주기 - props 지금까지는 컴포넌트를 만들고 그 컴포넌트에게 데이터를 넘겨주지 않고 그대로 렌더링만 했었다. 오늘은 컴포넌트가 사용할 인자를 넘겨주는 방법에 대해서 알아보았다. 1. 컴포넌트에서 사용할 인자 지정해주기 [props.js] const root = document.querySelector("#root"); const App = () => { return ( ); }; ReactDOM.render(, root); 2. 컴포넌트에서 인자 받아오기 [props.js] const Btn = (props) => { console.log(props) return ( ) } 이렇게 첫 번째 인자로 데이터를 받아올 수 있다. props를 콘솔에 찍어보면 넘겨준 test의 값을 볼 수 있다. 컴포넌트에서 데이터를 받을 때는.. React에서 useState사용하기 1. 동적인 데이터를 useState함수를 사용해서 지정해준다. [react.js] const root = document.querySelector('#root') const App = () => { let [counter, setCounter] = React.useState(0); } ReactDOM.render(, root); 2. 어떤 동작을 실행할 때 데이터를 수정해주는 함수를 만들어준다. 일반적으로 데이터 접두어로 set을 붙여서 만드는 듯 하다. [react.js] const root = document.querySelector('#root') const App = () => { let [counter, setCounter] = React.useState(0); function countUp(.. React에서 createElement 사용하기 1. React를 사용해서 페이지를 렌더링 하기 위해서는 React와 ReactDom을 가져온다. [index.html] 2. React.createElement 함수를 통해서 원하는 html 요소를 생성한다. [index.js] const span = React.createElement('h3', { onMouseEnter: () => console.log('mouse enter') }, 'TEST') const button = React.createElement('button', { onClick: () => {console.log('clicked')} }, 'Click me') createElement의 첫 번째 인자로는 html의 태그를 작성한다. createElement의 두 번째 인자로는 pr.. 이전 1 다음
