Breaking paragraphs

Author: rlagksruf16

content/docs/state-and-lifecycle.md

@@ -14,6 +14,7 @@ This page introduces the concept of state and lifecycle in a React component. Yo
 
 Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Rendering Elements](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `ReactDOM.render()` to change the rendered output:
 [이전 섹션](/docs/rendering-elements.html#updating-the-rendered-element)에서 다뤄본 째깍거리는 시계 예시를 다시 살펴보겠습니다. [엘리먼트 렌더링](/docs/rendering-elements.html#rendering-an-element-into-the-dom)에서는 UI를 업데이트하는 한 가지 방법만 배웠으며, 렌더링 된 출력값을 변경하기 위해 `ReactDOM.render()`를 호출했습니다.
+
 ```js{8-11}
 function tick() {
   const element = (
@@ -39,6 +40,7 @@ In this section, we will learn how to make the `Clock` component truly reusable
 
 We can start by encapsulating how the clock looks:
 시계가 생긴 것에 따라 캡슐화하는 것으로 시작할 수 있습니다.
+
 ```js{3-6,12}
 function Clock(props) {
   return (
@@ -67,6 +69,7 @@ However, it misses a crucial requirement: the fact that the `Clock` sets up a ti
 
 Ideally we want to write this once and have the `Clock` update itself:
 이상적으로 한 번만 코드를 작성하고 `Clock`이 스스로 업데이트하도록 만들려고 합니다.
+
 ```js{2}
 ReactDOM.render(
   <Clock />,
@@ -104,6 +107,7 @@ You can convert a function component like `Clock` to a class in five steps:
 
 5. Delete the remaining empty function declaration.
 5. 남아있는 빈 함수 선언을 삭제합니다.
+
 ```js
 class Clock extends React.Component {
   render() {
@@ -134,6 +138,7 @@ We will move the `date` from props to state in three steps:
 
 1) Replace `this.props.date` with `this.state.date` in the `render()` method:
 1) `render()` 메서드 안에 있는 `this.props.date`를 `this.state.date`로 변경합니다.
+
 ```js{6}
 class Clock extends React.Component {
   render() {
@@ -149,6 +154,7 @@ class Clock extends React.Component {
 
 2) Add a [클래스 constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor) that assigns the initial `this.state`:
 2) 초기 `this.state`를 지정하는 [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor)를 추가합니다.
+
 ```js{4}
 class Clock extends React.Component {
   constructor(props) {
@@ -169,6 +175,7 @@ class Clock extends React.Component {
 
 Note how we pass `props` to the base constructor:
 여기서 어떻게 `props`를 기본 constructor에 전달하는지 유의하십시오.
+
 ```js{2}
   constructor(props) {
     super(props);
@@ -181,6 +188,7 @@ Class components should always call the base constructor with `props`.
 
 3) Remove the `date` prop from the `<Clock />` element:
 3) `<Clock />` 요소에서 `date` prop을 삭제합니다.
+
 ```js{2}
 ReactDOM.render(
   <Clock />,
@@ -193,6 +201,7 @@ We will later add the timer code back to the component itself.
 
 The result looks like this:
 결과는 다음과 같습니다.
+
 ```js{2-5,11,18}
 class Clock extends React.Component {
   constructor(props) {
@@ -236,6 +245,7 @@ We also want to [clear that timer](https://developer.mozilla.org/en-US/docs/Web/
 
 We can declare special methods on the component class to run some code when a component mounts and unmounts:
 컴포넌트 클래스에서 특별한 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드를 작동할 수 있습니다.
+
 ```js{7-9,11-13}
 class Clock extends React.Component {
   constructor(props) {
@@ -267,6 +277,7 @@ These methods are called "lifecycle methods".
 
 The `componentDidMount()` method runs after the component output has been rendered to the DOM. This is a good place to set up a timer:
 `componentDidMount()` 메서드는 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행됩니다. 이 장소가 타이머를 설정하기에 가장 좋아 보입니다.
+
 ```js{2-5}
   componentDidMount() {
     this.timerID = setInterval(
@@ -284,6 +295,7 @@ While `this.props` is set up by React itself and `this.state` has a special mean
 
 We will tear down the timer in the `componentWillUnmount()` lifecycle method:
 `componentWillUnmount()` 생명주기 메서드 안에 있는 타이머를 분해해 보겠습니다.
+
 ```js{2}
   componentWillUnmount() {
     clearInterval(this.timerID);
@@ -294,6 +306,7 @@ Finally, we will implement a method called `tick()` that the `Clock` component w
 마지막으로 `Clock` 컴포넌트가 매초 작동하도록 하는 `tick()`이라는 메서드를 구현해 보겠습니다.
 It will use `this.setState()` to schedule updates to the component local state:
 이것은 컴포넌트 로컬 state를 업데이트하기 위해 `this.setState()`를 사용합니다.
+
 ```js{18-22}
 class Clock extends React.Component {
   constructor(props) {
@@ -377,6 +390,7 @@ this.state.comment = 'Hello';
 
 Instead, use `setState()`:
 대신에 `setState()`를 사용합니다.
+
 ```js
 // Correct
 this.setState({comment: 'Hello'});
@@ -396,6 +410,7 @@ Because `this.props` and `this.state` may be updated asynchronously, you should
 
 For example, this code may fail to update the counter:
 예를 들어 다음 코드는 카운터 업데이트에 실패할 수 있습니다. 
+
 ```js
 // Wrong
 this.setState({
@@ -405,6 +420,7 @@ this.setState({
 
 To fix it, use a second form of `setState()` that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:
 이를 수정하기 위해 객체보다는 함수를 인자로 사용하는 다른 형태의 `setState()`를 사용합니다. 그 함수는 이전 state를 첫 번째 인자로 받아들일 것이고, 업데이트가 적용된 시점의 props를 두 번째 인자로 받아들일 것입니다.
+
 ```js
 // Correct
 this.setState((state, props) => ({
@@ -414,6 +430,7 @@ this.setState((state, props) => ({
 
 We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) above, but it also works with regular functions:
 위에서는 [화살표 함수](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)를 사용했지만, 일반적인 함수에서도 정상적으로 작동합니다.
+
 ```js
 // Correct
 this.setState(function(state, props) {
@@ -431,6 +448,7 @@ When you call `setState()`, React merges the object you provide into the current
 
 For example, your state may contain several independent variables:
 예를 들어, state는 다양한 독립적인 변수를 포함할 수 있습니다. 
+
 ```js{4,5}
   constructor(props) {
     super(props);
@@ -443,6 +461,7 @@ For example, your state may contain several independent variables:
 
 Then you can update them independently with separate `setState()` calls:
 별도의 `setState()` 호출로 이러한 변수를 독립적으로 업데이트할 수 있습니다.
+
 ```js{4,10}
   componentDidMount() {
     fetchPosts().then(response => {
@@ -473,18 +492,21 @@ This is why state is often called local or encapsulated. It is not accessible to
 
 A component may choose to pass its state down as props to its child components:
 컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있습니다.
+
 ```js
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
 This also works for user-defined components:
 이것 또한 사용자 정의된 컴포넌트에도 적용 가능합니다.
+
 ```js
 <FormattedDate date={this.state.date} />
 ```
 
 The `FormattedDate` component would receive the `date` in its props and wouldn't know whether it came from the `Clock`'s state, from the `Clock`'s props, or was typed by hand:
 `FormattedDate` 컴포넌트는 `date`를 자신의 props로 받을 것이고 이것이 `Clock`의 state로부터 왔는지, `Clock`의 props에서 왔는지, 수동으로 입력한 것인지 알지 못합니다.
+
 ```js
 function FormattedDate(props) {
   return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
@@ -502,6 +524,7 @@ If you imagine a component tree as a waterfall of props, each component's state
 
 To show that all components are truly isolated, we can create an `App` component that renders three `<Clock>`s:
 모든 컴포넌트가 완전히 독립적이라는 것을 보여주기 위해 `App`와 렌더링하는 세 개의 `<Clock>`을 만들었습니다.
+
 ```js{4-6}
 function App() {
   return (