전체 글 (174) 썸네일형 리스트형 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... sum 함수 만들기 (재귀, 꼬리 재귀, 번역한 for문) https://jootang2.tistory.com/172 프로그램이란...? 개발자는 프로그래밍을 하는 직업이다. 프로그래밍은 뭘까? 프로그래밍은 프로그램을 만드는 일이다. 그렇다면 프로그램은 뭘까? 1. 프로그램은 코드가 아님 2. 실행파일 (ex : exe 파일)은 프로그 jootang2.tistory.com 이어서 오늘은 함수에 대해서 배웠다. 그리고 앞으로 이 수업을 들으면서 진행하는 방향도 알았다, Q. 1부터 10까지 더하는 함수를 작성해라 if(1){ let acc = 0; for(let i = 1 ; i v > 1 ? v + sum(v - 1) : 1; 현재 코드의 문제점 a() -> b() -> c() -> d() -> ........ : d가 처리되어야 c가 처리되고, c가 처리되어야.. 프로그램이란...? 개발자는 프로그래밍을 하는 직업이다. 프로그래밍은 뭘까? 프로그래밍은 프로그램을 만드는 일이다. 그렇다면 프로그램은 뭘까? 1. 프로그램은 코드가 아님 2. 실행파일 (ex : exe 파일)은 프로그램이 아님, 파일일 뿐임 3. 파일을 실행해서 OS에 적재한 상태가 프로그램임 4. 메모리에 적재돼서 올라가면 프로그램임 5. 파일은 프로그램 X 6. 프로그램은 명령과 값으로 메모리에 올라감 7. 실행파일 실행 -> 메모리에 명령이 쫙 올라감, 값들이 쫙 올라감 8. 메모리에 적재된 명령이 쭉 실행되면 프로그램이 종료 9. 중간에 명령에서 분기 처리, 명령간의 이동 10. 중간에 명령에서 뺑뺑 돌면 프로그램은 끝나지 않음 프로그램이 뭐냐고 하는 질문을 받으면 위의 내용을 떠올리가 위 사진을 떠올리면 된다. .. 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 2 3 4 ··· 22 다음
