react
-
[2019.07.13] React에 TypeScript를 적용하면 constructor를 쓰지 않는다?개발 블로깅/TypeScript 2019. 7. 13. 19:34
클래스형 컴포넌트 안에서 state를 사용할 때, 일반적으로 아래와 같은 코드로 구현한다. # React 클래스 컴포넌트에서 일반적인 state 선언 방식 class component extends React.Component { constructor(props){ super(props); this.state = { name: '', age: 0 } } render()( hello Typescript ) } 여기서 타입스크립트를 적용시키면 변경되는 부분이 몇 군데 있다. # React에 TypeScript를 적용시킬 시, 일반적인 클래스 컴포넌트 사용 방식 interface State{ name:string; age:number; } class component extends React.Component..
-
[2019.07.11] React + TypeScript + Webpack 환경 설정개발 블로깅/React 개념 2019. 7. 11. 09:48
React의 보일러 플레이트 CRA를 사용한 것이 아닌, 직접 웹팩 세팅에 TypeScript를 적용한 환경설정을 해보자. # 프로젝트 디렉토리 생성 $ mkdir React_TypeScript $ cd React_TypeScript 프로젝트로 사용할 디렉토리를 생성하고 해당 디렉토리로 이동한다. # packge.json 생성 $ npm init -y 해당 프로젝트의 디렉토리에 사용할 packge.json을 생성한다. # webpack 세팅 $ npm i -D webpack webpack-cli 프로젝트에 사용할 webpack을 개발용 패키지로 설치한다. $ touch webpack.config.js 이후에 webpack 실행에 관한 설정을 하는 webpack.config.js 파일을 root 경로에 생..
-
[2019.05.26] 오늘의 TIL - react key개발 블로깅/오늘의 TIL 2019. 5. 26. 17:43
배열만큼 동적으로 생성하여 만든 컴포넌트가 있다. 각 컴포넌트마다 state값을 가지고 있다. 배열 값 하나가 사라지는 작업으로 인해, 동적 컴포넌트 개수도 따라 하나가 사라지는데, 이 때 각 컴포넌트의 고유의 key 값이 없으면, 각 컴포넌트의 state는 자기위치 그대로 있고, 마지막 컴포넌트 하나만 사라진다. key값으로 인해 각 고유의 state값을 유지해 주어야한다. 그래야 중간에 값이 사라져도 virtual DOM으로 인해 컴포넌트 내 state가 유지되는 것을 막을 수가 있다.
-
[2019.05.19] 오늘의 TIL개발 블로깅/오늘의 TIL 2019. 5. 19. 18:34
오늘 리액트 2주 프로젝트 작업을 하다가 정말 알 수 없는 문제로 1시간을 아깝게 버린 일이 있었다.. 해당 문제는 아래의 예시와 같다.. var names = ['inyong','jack','carry','luck']; return ( {names.map((data,index)=>{ })} ) 위와 같이 name,key를 props로 던져준다. key는 동적으로 생성하여 사용시, 각 컴포너트 마다의 고유의 key값을 가지게 하는 것을 권장한다. 그래서 저렇게 key = {index}로 넣어서 각 고유의 키 값을 전달해주지만, MyComponent 태그 안에서는 key 값을 찾으면 계속 undefined로 나온다. class MyComponent extends Component { render(){ co..
-
[2019.05.08] react-redux 사용하기 (매우 어려움 주의...)개발 블로깅/React 개념 2019. 5. 8. 22:04
리액트 컴포넌트의 Depth가 커질 때마다 컴포넌트들끼리 state를 주고받기가 힘들어진다. 예를 들어, Depth가 5 정도 있는 컴포넌트가 Depth가 2 정도에 있는 컴포넌트의 state를 변경한다고 하면, 중간에 있는 모든 컴포넌트들이 해당 기능을 전달해 주어야 한다. 그래서 모든 컴포넌트들이 state를 쉽게 공유할 수 있게 하는 방식이 redux이다... 개념이 정말 엄청나게 어렵다... 지금까지 배운 스프린트 중 제일 어려운 것 같다. 이틀동안 리덕스만 공부했는데, 이제야 감이 조금 잡힐 정도이다. 내가 공부해서 느낀대로, 습득한 대로 정리한 리덕스 개념. 우선 리덕스는 리액트 내부에 있는 기술이 아니다. 리덕스는 순수 html, javascript 내에서도 사용 가능하다. 그냥 대체적으로 ..
-
[2019.04.15] React의 개념 - LifeCycle API개발 블로깅/React 개념 2019. 4. 15. 20:32
lifeCycle 즉, 나타나기 전, 나타난 직후, 나타난 후, 사라지기 전 등등, 어떠한 것에 대해 나타나기 전부터 나타난 후 사라지기까지의 모든 과정을 말한다. 모든 컴포넌트는 이러한 lifeCycle 동안 발생할 수 있는 함수들을가지고 있다. -- [2019.04.17] 수정사항 -- 현재 리액트 버전 16.4에 들어서면서 왠만한 라이프사이클이 불필요하게 되었다. 현재 공식문서에 나오는 라이프사이클 API componentDidMount : 초기 컴포넌트가 생성될 때 componentDidUpdate : 중간에 컴포넌트가 변경사항이 있을 때 componentWillUnmount : 컴포넌트가 삭제될 때 ------- # 브라우저에 나타나기 전 호출되는 API constructor constructo..
-
[2019.04.15] React의 개념 - state개발 블로깅/React 개념 2019. 4. 15. 18:44
내가 이해한 대로 적는 설명 state는 해당 컴포넌트가 가지고 있는 상태, 즉 데이터를 말한다. 각 컴포넌트들은 자신의 데이터들을 가지고 있을 수 있다. (함수형의 컴포넌트는 state를 가지지 않는다! 오로지 class 방식만!) # state를 선언하는 법 class Hello2 extends React.Component{ constructor(props){ super(props); this.state = { //여기에 Object 방식으로 state를 저장 name : 'inyong', age : 27 } } render = () => ( Hello {this.props.todo} ) } constructor 생성자에서 state변수를 만든다. 그리고 그 안에 object 방식으로 데이터를 추가해..
-
[2019.04.15] React의 개념 - props개발 블로깅/React 개념 2019. 4. 15. 16:50
내가 이해한 대로 적는 개념 설명 기존의 자바스크립트와는 다르게 react에는 클래스나 함수 하나하나가 컴포넌트로 볼 수 있다. 컴포넌드는 여러 html요소가 구현되어 있는 하나의 html구성(?) # 함수 방식으로 컴포넌트를 생성하는 방법 const HelloWorld = () => { return ( 헬로월드 ); }; ReactDOM.render(, document.getElementById("root")); 컴포넌트 생성 방법은 두가지가 있다. 위 코드처럼 함수 형태로 생성하는 방법. return 괄호 안의 태그들이 호출되는 곳에 렌더될 부분이다. 이 방법은 따로 state를 가지지않고 짜여진 틀만 가져와서 사용하면 될 때 쓰면 될 듯하다. const HelloWorld = () => ( 헬로월드..