본문 바로가기
반응형

React18

[React 따라하기 #15] React sass @mixin @mixin 과 @include css 의 프로퍼티들의 묶음이라고 보면될거같습니다. 예를 들어 scss 에서 @mixin tab-text{ color: red; font-size: 20px; font-weight: bold; background-color: gray; } 이렇게 정의하고 사용할 때는 @include 를 사용합니다. .tab_select { @include tab-text; background-color: green; } 이렇게 사용합니다. css로 변환되면 아래와 같이 됩니다. .tab_select { color: red; font-size: 20px; font-weight: bold; background-color: gray; background-color: green; } 중복되는 c.. 2020. 1. 3.
[React 따라하기 #14] React sass sass 는 css 의 pre-processor 입니다. npm 이나 yarn 으로 설치합니다. cmd 에서 // yarn 으로 설치 c:\your_project>yarn add node-sass // 또는 npm 으로 설치 c:\your_project>npm install node-sass 확장자는 scss 입니다. sass_test.scss $textColor: yellow; $bgColor: white; h1 { color: $textColor; } .someClass { color: $textColor;// 중복되는 value 를 한번에 변경 가능. background-color: $bgColor; } 위에서 보듯이 syntax 는 $variableName: value; 이렇게 작성하고 impor.. 2020. 1. 3.
[React 따라하기 #11] React Event 리액트 이벤트 React 에서도 HTML 과 같은 이벤트를 사용합니다. click, change, mouseover등 대신 camelCase Syntax로 써야합니다. ( 단어단위로 대문자 시작 ) html 과 비교해보면 HTML : action! React : action! // doAction 이라는 function 이 있다면 기본적인 이벤트 사용 class Robot extends React.Component { render(){ return ( Action! ) } doAction(){ alert("ok"); } } ReactDOM.render(, document.getElementById("root")); 버튼을 클릭하게 되면 "ok" alert 이 뜹니다. doAction 안에서 this 를 Bind 하고 .. 2020. 1. 2.
[React 따라하기 #10] React 기본 함수 (life cycle) Mounting, Updating, Unmounting. - Mounting Dom 으로 elements를 넣는것 이라고 설명되어있는데, 간략히는 화면에 나타날 때 라고 생각해도 될거같습니다. 여기에 속하는 메소드로는 constructor() 생성자로 class 생성 시 호출 옵션 getDerivedStateFromProps() render() 호출 전 옵션 render() DOM 에 html 내보냄 필수 componentDidMount() render() 호출 후 옵션 render 는 반드시 작성해야합니다. 나머지는 정의하지 않으면 호출되지 않습니다. 만약 모두 정의했다면 표에 나온 순서대로 실행되게 됩니다. 예제로 보시죠. webstorm 으로 만들었던 프로젝트에서 src 아래에 js 파일을 하나 만.. 2020. 1. 2.
[React 따라하기 #9] React State React State state 는 컴포넌트가 갖고있는 object 입니다. state 가 변경되면, 컴포넌트는 다시 랜더합니다. state 를 사용하려면 constructor 에서 속성을 초기화 해야 합니다! 그래야 사용할 수 있어요. 아래 예제에 render 안에서 this.state.gender 는 사용가능, this.state.footsize 는 불가능합니다. 역시 예제로 알아보는게 좋겠죠. class Hello extends React.Component { constructor(props) { super(props); this.state = { gender: "man", tall: "181", weight: "80" }; } render() { return Hello {this.props.nam.. 2019. 12. 31.
[React 따라하기 #5] React JSX JSX 란? JSX는 JavaScript XML을 나타냅니다. JSX를 사용하면 React에서 HTML을 작성할 수 있습니다. JSX를 사용하면 React에서 HTML을보다 쉽게 ​​작성하고 추가 할 수 있습니다. // JSX 없이 코딩 const myelement = React.createElement('h1', {}, 'I do not use JSX!'); ReactDOM.render(myelement, document.getElementById('root')); // JSX 사용 const myelement = I Love JSX!; ReactDOM.render(myelement, document.getElementById('root')); 태그는 반드시 닫혀야 합니다. const myCar = (.. 2019. 12. 30.
[React 따라하기 #3] Codepen에서 실행해보기 Codepen.io 에서 아래 코드를 바꿔가며 실행해 볼수 있습니다. 아래의 코드팬들의 우측상단에 Codepen 을 누르면 새창이 열리고 소스를 수정하면 반영이됩니다. See the Pen XWJaQpd by Seunggeun Oh (@seunggeun-oh) on CodePen. js 의 return 안에 있는 html 도 바꿔보고, 변수 사용하는 방법 See the Pen rNaGBVz by Seunggeun Oh (@seunggeun-oh) on CodePen. 그리고 아래와같이 javascript 함수들을 사용할 수 있습니다. See the Pen OJPxLyL by Seunggeun Oh (@seunggeun-oh) on CodePen. [React 따라하기 #1] React 개발에 필요한 도구.. 2019. 12. 30.
[React 따라하기 #1] React 개발에 필요한 도구 설치 Windows 로 시작 합니다. 제가 윈도우 쓸거기 때문에. ㅎㅎ; 일단 npm, nodejs, yarn 은 아래 링크 참고하시어 설치합니다. [React,Node,JQuery,js] - Node js, NPM 설치하기 (윈도우10) [React,Node,JQuery,js] - yarn 이란? yarn 설치 방법 (Windows) [React,Node,JQuery,js] - yarn 이란? yarn 설치 방법 (Mac) 그리고 프로젝트를 생성할 때 편리하게 해주는 create-react-app 를 설치합니다. cmd 를 실행하고 아래 명령어를 입력합니다. npm install -g create-react-app yarn 을 이용한 설치 방법은 yarn global add create-react-app 요.. 2019. 12. 27.
728x90
반응형

티스토리툴바