Intro… 임무는 외부링크로 연결되는 a태그를 새로운 창에서 열리게 하는 것이었다. 회사는 마크다운으로 회사 랜딩페이지의 글들을 렌더링하고 있었다. 렌더링 된 html에 속성을 넣고 팀장님이 이건 근본적인 해결이 아니라고 코멘트 해주셨다. 마크다운 문법을 html로 렌더링 시키는 렌더러에서 작업을 수행해야 했는데, 묘하게도 속성만 DOM에 나타나지 않았다. 묘한일이다 묘한일이야… 뭔가 이상한데, 하며 입사 2주차였던 나는 선뜻 물어보지도 못하고 머리를 꽁꽁 싸매고 있었다. 이유는 뭐였을까? 원인 범인은 DOM Purify 였다. Dom Purify는 악성 스크립트를 삽입하는 XSS 공격을 막기 위한 라이브러리다. 깃허브를 보면 더러운 HTML을 깨끗한 HTML로 바꿔준다고 나와 있다. DOM Purify가 html을 살균하면서 보안에 취약한 을 더티코드로 인식해 제거해버린 것이다. 왜 보안에 취약할까? 해당 속성들을 살펴보면서 알아보자 이 둘은 보통 짝으로 같이…

state 올바르게 사용하기: 3원칙 01 state를 직접 수정하지 않습니다 this.state를 지정할 수 있는 공간은 constructor 뿐입니다.(초기 세팅) 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 합니다. 다음과 같이 쓰여진 코드는 리렌더링 되지 않을 수 있습니다. 대신에, setState를 사용해야 합니다. 02 state 업데이트는 비동기적일 수 있습니다 다음과 같이 props와 기존 state를 한꺼번에 처리하는 경우가 있습니다. this.props와 this.state는 비동기적으로 업데이트 될 수 있기 때문에 객체 형식이 아닌 함수를 인자로 사용하는 형태를 사용합니다. 03 state의 업데이트는 병합됩니다 state는 객체형태로 지정이 가능합니다. 다양한 독립적인 변수를 포함할 수 있는데, 이러한 변수들을 또 독립적으로 업데이트 할 수 있습니다. this.setState({comments})를 진행할 때 this.state.p…

Intro… 리액트의 lifecycle은 세 단계로 구분할 수 있다. 리액트의 각 컴포넌트들은 모두 위의 라이프사이클을 따른다. 우리는 를 이용하여 라이프사이클의 특정 단계에서 원하는 코드를 실행하도록 할 수 있다. 는 돔에 요소들을 넣는 단계다. 는 말 그대로 컴포넌트가 업데이트 되는 단계다. 는 돔에서 컴포넌트가 제거되는 단계다. 자세히 살펴보자. Mounting 컴포넌트의 인스턴스가 생성이 되고 돔에 삽입될 때, 아래의 들은 다음과 같은 순서로 호출이 된다. (클래스형 컴포넌트만 컴포넌트 인스턴스를 가진다. 컴포넌트 클래스 내부에서 this 키워드를 통해 참조하는 대상에 해당) (굵은 글씨의 함수가 자주 쓰이는 함수다.) ⚠️주의UNSAFE_componentWillMount() 함수는 legacy code로 여겨지고 있기 때문에 지양된다. render()함수는 필수고 항상 호출되며, 나머지 함수들은 선택사항이다. constructor() : mount 전에 호출 constuc…