10/5[TIL]React

리액트는 컴포넌트(하나의 의미를 가진 독립적인 모듈)에 집중하고 있는 프로트엔드의 라이브러리이다.

여기서 컴포넌트는 나만의 html 태그라고 생각하면 된다. 컴포넌트 단위로 개발 진행되기 때문에 보다 재사용성이 높고 직관적인 코딩을 할 수 있다.

 

JSX는 리액트와는 떼려야 뗄 수 없는 관계이다.

JSX는 javascript의 확장 문법으로 우리가 작성한 리액트 컴포넌트를 화면에 보여주기 위해 사용한다.

만약 사용하지 않는다면 복잡도가 올라가고 가독성 또한 떨어지게 된다.

이러한 JSX를 사용할 때 주의해야 할 점이 있다.

 

첫째 반드시 하나의 엘리먼트로 감싸야한다.

둘째 javascript코드를 적용할 때는 {} 안에 작성한다.

셋째 JSX 내에서는 if문을 사용할 수 없기에 IIFE 또는 삼항 연산자를 사용한다.

넷째 엘리먼트의 클래스 이름을 적용할 때, class가 아닌 className을 사용한다.

 

리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉘는데 props와 이 둘의 차이점을 보자면

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아온 props를 직접 수정할 없다. EX) 이름, 성별

반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 그리고 ES6 class를 이용해서 만들어야 한다. 상태 변경 시 setState를 이용하여야 한다. EX) 나이,현재 사는 곳, 취업여부, 결혼/연애 여부

 

this.setState 사용법 및 사용해야 하는 이유는 현재 상태에 의해서 해당 값이 조건부 렌더링 되며 상태를 변경 시에 사용한다.

이전 state를 반전한다고 보면 될 것이다.

this.setState(state => ({
isOn : !state.isOn
})

this.handleClick = this.handleClick.bind(this);