늘 겸손하게

Props props는 읽기 전용 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트 자체 props를 수정해서는 안됩니다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. 순수 함수 동일한 입력값에 대해 항상 동일한 결과를 반환하는 함수 외부 상태를 변경하거나 영향을 받지 않는 함수 한마디로, 부수효과가 없고 같은 입력에 대해 같은 출력을 반환하는 함수입니다. 부수효과 ( side effect ) 함수 외부 변수 혹은 상태값 변경 함수로 들어온 인자값 변경 console.log XHR/fetch call 예로 1 2 3 function sum(a, b) { return a + b; } cs 위의 sum 함수는 순수 함수입니다. 반면에 다음 함수는 자신의 입력값을..

서론 React 컴포넌트를 선언하는 방식은 두 가지가 있다. 하나는 클래스형 컴포넌트, 다른 하나는 함수형 컴포넌트이다. 두 가지 방식의 차이를 알아보자 목차 선언 방식 차이 state 선언, 사용 차이 Props 호출 차이 1. 선언 방식 차이 클래스 컴포넌트 컴포넌트 시작에 class 키워드 필요 React.Component 상속 render() 메소드 필요 함수형 컴포넌트 return문 내부에서 JSX 작성 비교 2. state 선언, 사용 방식 클래스형 - 선언 방식 constructor 내부에서 this.state를 통해 1 2 3 4 5 6 7 8 9 10 11 class Sample extends Component { constructor(props) { super(props); this...

Redux란? 공식 페이지에서는 Redux를 "자바스크립트를 위한 예측가능한 state 컨테이너"로 정의합니다. Redux는 한 마디로 자바스크립트 상태(state) 관리 라이브러리입니다. Redux는 state 관리 라이브러리로 React를 포함한 다양한 자바스크립트 라이브러리와 같이 사용가능합니다. 하지만 React의 기능적 성격 때문에 React와 잘맞아 일반적으로 Redux는 React와 같이 사용됩니다. 왜 Redux를 사용하나요? 컴포넌트의 state는 컴포넌트가 언제 렌더링될지, 어떤 행동을 할지를 결정합니다. 이 state를 props를 통해 자식 컴포넌트로 전달하는것도 가능합니다. 이러한 state을 컴포넌트 내부에 저장하는 일은 컴포넌트 개수가 적고 깊이도 얖은 작은 앱을 개발할때는 큰..

React란? React는 오늘날 가장 유명한 JavaScript 라이브러리 중 하나입니다. 공개된 이후 수년이 지난 지금도 웹 개발자들이 사용 중이고 view를 유지하고 만들기에 가장 좋은 JavaScript UI 라이브러리입니다. React를 이렇게 유명하게 만든 주요한 특징은 바로 React의 JSX와 Virtual DOM입니다. JSX는 JavaScript eXtension의 축약어로 자바스크립트 구문의 확장판입니다. JSX는 HTML구문과 JavaScript를 혼합하여 개발자가 브라우저에 쉽게 접근할 수 있게 만들었습니다. Virtual DOM은 웹 브라우저가 생성한 DOM tree의 가상 복사본으로 실시간으로 일어나는 업데이트를 기록하기 위해 React에서 생성합니다. React js를 사용..