본문 바로가기
반응형

분류 전체보기

 (127)
React : 메소드 작성 + 화살표함수 컴포넌트에 메소드를 작성했어! 위 사진처럼 작성할 수도 있고 이렇게도 작성 할 수 있어! 이렇게 작성했을 때, this가 undefined로 나와서 제대로 처리되지 않게 되거든? 함수가 버튼의 클릭이벤트로 전달되는 과정에서 "this"와 연결이 끊겨버리기 때문이야! 이를 고쳐주려면 constructor에서 이렇게 해줘야 해.. 그냥 화살표 함수 쓰자.. 참조: velopert.com/3629 화살표 함수를 공부하면서 모든 것을 대체할 수 없다는 것을 알아버렸지 뭐얌 function BlackDog() { this.name = '흰둥이'; return { name: '검둥이', bark: function() { console.log(this.name + ': 멍멍!'); } } } const blackDo..
React : state를 통해 동적인 데이터를 다뤄보자!! 우선 Counter 컴포넌트를 하나 만들어보자! 위에서부터 아래로 살펴보자! 우선, 컴포넌트의 state를 정의할 때에는 class fields 문법을 사용해서 정의해! 만약 class fields 문법을 사용하지 않는다면 이렇게 돼! 확실히 class fields를 사용하는게 편해보이지? 맞아! 편의성 때문에 class fields를 사용하는거야! constructor에서 super(props)를 호출한 이유는 우리가 컴포넌트를 만들게 되면서 컴포넌트를 상속하게 되고 constructor를 사용하면 기존의 클래스 생성자를 덮어쓰게 돼! 그래서 리액트 컴포넌트가 갖고 있던 생성자를 super를 통해서 미리 실행하고 그 다음에 우리가 할 작업(state 설정)을 해주는거야! 만약 class fields도 ..
React : 함수형 컴포넌트 + defaultProps 함수형 컴포넌트 //MyName.js import React from 'react'; const MyName = ({ name }) => { return ( 안녕하세요! {name} 입니다. ) } MyName.defaultProps = { name: '기본이름' } export default MyName; //App.js import React, { Component } from 'react'; import MyName from './MyName'; import './App.css'; class App extends Component { render() { return ( ) }; } export default App; 함수형 컴포넌트와 클래스형 컴포넌트의 주요 차이점은, state 와 LifeCycl..
React -13: 완성! 원래 더 뭐를 쓰려고 했는데 뭐가 더 없네 .. 그냥 css 입히고 끝이야... 근데 이정도면 api 가져와서 쓸 수 있을 정도 됐으니까! 리액트를 어느정도 다룰 수 있다고 할 수 있지 않을ㄲ..? 응 아니야... 일단 나 같은 경우엔 이렇게 구현했어! 리액트 공부라서 반응형은 시간낭비 같아서 일부러 구현하지 않았고 다른 프로젝트로 다시 한번 해보려고 해!! 다음 리액트로 다시 한번 해보자고 !! 나도 처음이라 설명 잘 못한게 많은거 같은데 .. 다음에서는 더 열심히 해볼게 가자가ㅏ자갖가자갖가자갖 참고: nomadcoders.co/
swiper motion(without scrollMagic) 보호되어 있는 글입니다.
React -12 : Genres 추가하기! 항히아히아히아히ㅏㅣㅎ이하이항 좋은 데모를 가지고 왔어! 짜잔!! dribbble.com/shots/2442798-Movie-Application 이 주소로 가면 볼 수 있어! 이 디자인을 한번 카피해보자고!! 사진처럼 유저, 좋아요, 스타 이런건 없지만 장르는 가지고 있잔아? 그럼 바로 추가! 이제 할 줄 알지?? 혼자 해보고 보는걸 추천 해! 장르는 배열로 되어 있는거 확인했지 ? 따라서 이렇게 해야 해! 그리고 class를 className으로 전부 바꿔줘! React에서는 class를 className으로 표기 해줘야 해!! 이렇게 하면 콘솔에 key값 에러가 나오지? 사실 map은 또 다른 argument 하나가 주어져! 하나는 현재의 item이고 다른 하나는 item number야! 확인 해보자..
React 실습 - 11 : 이제 꾸며보자ㅏㅏㅏ 이제 html을 약간 손보고 css도 해보자ㅏㅏ!!!! 우선, div를 section class="container"로 바꿔주고! "Loading"을 HTML로 만들자 Loading... 이렇게 추가한다면! 이렇게 나오지!? 오케이! 그리고 movie를 movie component로 만들거야! 이렇게 해보자! ()를 넣어서 좀 더 보기 쉽게 정리 했어!! 그리고 Movie.js에서 이렇게 수정! 실습하는데 ID는 필요 없어서 빼놨어!! 런 !! 오마갓! 멋져멋져~ 이제 예쁘게 만들어보자고! create-react-app 덕분에 css 통합이 너무 너무 쉬워! react에 많은 옵션으로 component를 더 멋지게 만들 수 있어! 지금은 style component를 써보자! 사실 이 부분도 조금 배우긴..
React - 클래스형과 함수형의 차이!! 원래 안끊고 가려고 했는데 표기하는데 있어 여러가지 방법이 있는걸 알고 편한거 썼으면 좋겠어서 포스트 해! 출처 남겨놨으니까 글쓴이 블로그도 한번 방문해 줘!! 고고 !! 1. 클래스형 컴포넌트 react 컴포넌트 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재 자주 사용하지 않지만, 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. 2. 클래스형 컴포넌트와 함수형 컴포넌트 차이 1) 선언 방식 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default A..
반응형

티스토리툴바