javascript/React.Js(12)
-
[React.js] React.js 6편 LifleCycle1
React.js 6편 LifeCycle1 웹페이지가 호출될 때 업데이트될 때 사라질 때 각 그 순간 사이사이에 자기가 함수를 넣어서 어떠한 작업을 하고싶을 때 사용하면 좋다. 라이프 사이클 실행형태 아래와같은 형태로 lifeCycle이 실행된다. 각종 초반 설정등을 해주고 웹페이지가 처음실행될 때 Mountingstate나 props등의 변화가 필요할때는 updating 사라질때는 Unmounting이라고한다. 각함수의 역활등에 대해서 설명해보겠다. Mounting1. Constructor 제일 처음 실행되는 함수이며 state나 기본 설정을 할 수 있다. 2. getDerivedStateFromProps입력받은 Props를 state에 동기화하고 싶을 때 사용한다. 3. render 어떤 돔, 태그를 ..
2018.06.26 -
[React.js] React.js 5편 state
React.js state 이번에는 state라는 것을 사용해보겠다. state는 props와 달리 component내부에 가지고 있는 값이다. 값이 변화가 필요할때 다시 Rerendering해주며 변화가 필요한 데이터를 바꾸어 주는 역활을 한다. 그럼 이제부터 사용해보겠습니다. 우선 이렇게 JSX코드를 작성해봅니다. render(){ return Counter 값: {this.state.number} + - } 그럼 이런식으로 웹페이지가 만들어졌을 겁니다. 그럼 버튼이 작동하게 State를 작동시켜 봅시다. 우선 클래스안에 state 객체하나를 만들어 줍시다. 1. state객체 생성 state = { number: 0 }그리고 div안에 {this.state.number}같이 호출할 수 있습니다. 2..
2018.06.26 -
[React.js] React.js 4편 Props
React.js Props 필자는 동영상 강의를 듣고 있는데 강의하는 사람이 무척무척 중요한 개념이라고 한다. Props가 먼지 알아보자!!props는 부모의 값을 자식에게 전달해서 알려주는 것이다. 이제 사용법을 알아보자 class MyName extends Component{ render(){ return 지금 공부하고 있는 기술은 {this.props.name}이야 }} 여기서 보이는 this.props.name을 받아오는 방법이 세개정도 있다. 1. 이 파일을 호출하는 곳에 값을 넣기 APP.JS를 한번 보자. 여기서 MyName이라고 호출하고 있는데 MyName안에 name = "react.js"라고 적어주면 된다. class App extends Component { render() { ret..
2018.06.26 -
[React.js] React.js 3편 JSX2
React.js css사용해보기 이번에는 react.js를 통해 css효과를 줘보겠다. 방법 1. 변수에 넣어서 사용하기 render() { const style = { backgroundColor : "blue", color :"white", fontSize : "64px", } return hi i am React.Js } 아래와 같이 reder안에 style이라는 변수를 선언해주고 변수안에 css정보를 json형태로 나타낸 후 저번시간에 배운 {}안에 변수를 넣어주면 실행이 된다. 그리고 폰트사이즈와 같은 곳에는 숫자를 더해주며 값을 표현할 수 있다. 방법 2. CSS파일에 넣어서 사용하기 우선 사진과 같이 옆에 css파일을 하나 만들어줍니다. 그런뒤 저파일안에 자기가 원하는 css정보를 입력합니다..
2018.06.26 -
[React.js] React.js2편 JSX1
React.js JSX JSX는 html코드랑 비슷해 보이지만 사실은 자바스크립트 코드로 바꾸어 주어서 실행합니다. 일반 html이랑 사용법은 비슷하지만 몇가지 규칙이 있습니다. 지금 부터 그 규칙을 알아봅시다. 여기서 실행은 https://bit.ly/beginreact 이사이트를 이용하면 된다. 단순히 문법만을 설명하고 있습니다. 그리고 ES6의 문법으로 작성됩니다. 1. 무조건 닫힘 기호가 있어야 합니다. ex) 원래는
2018.06.26 -
[React.js] React.js 1편
React.js 1편 react.js는 페이스북에서 개발한 웹프론트에 이용할 수 있는 라이브러리이다. 프론트에 이용할 수 있는 라이브러리는 vue, angular, backbone 등등이 있다. 이중에서 뭐가 제일 좋냐고 물어본다면 자기가 가장 잘 쓰는 라이브러리가 가장 좋다고 생각한다. 따라서 뭐가 좋고 뭐가 안좋고 그런건 없는거다. 모든 언어나 기술이 똑같지만 개발한 사람들의 생각 무엇 때문에 이것을 만들었는지를 잘생각하면서 사용하면 좋겠다. 그러면 react의 개발 목적을 말하자면 단순히 웹페이지에 변화만 있다면 데이터를 바꿔주지 말고 뷰를 버리고 새로 만드는게 어떨까라는 아이디어에서 시작한 라이브러리라고 한다. 하지만 뷰화면을 버리고 새로운 화면을 다시 보여주는건 -> 성능상 문제가 생긴다. 그래..
2018.06.25