24.06.27 day11 코드트리 문제 풀기, 리액트의 라이프 사이클

별표 출력하기 13

정수 n의 값을 입력받아 별표를 출력하는 프로그램을 아래 예를 참고하여 작성해보세요.

 

예)

n에 2를 입력받는 경우

* * 
*
*
* * 

 

n에 3를 입력받는 경우

* * *
*
* *
* *
*
* * *

 

n에 4를 입력받는 경우

* * * *
*
* * *
* *
* *
* * *
*
* * * *

 

n = int(input())

print('* ' * n)
    
for i in range(1, n):
    print('* ' * i)
    print('* ' * (n - i))
    
print('* ' * n)

규칙이 처음과 마지막엔 n값의 별을 출력해야 하고 내부에선 작은쪽과 큰쪽에서 번갈아가며 출력된다.

이 부분을 반복문 안에서 처음은 맨 밑에서 시작하고 다음 출력은 맨 위에서 감소하는 방향으로 작성했다.

---

별표 출력하기 12

정수 n이 주어질 때, 아래 입출력 예제와 같이 별표를 출력하는 프로그램을 작성해보세요.

 

예)

n에 5를 입력받는 경우

* * * * *
  *    *
       *
       *

 

n에 6을 입력받는 경우

* * * * * *
  *    *   *
       *   *
       *   *
           *
           *

 

n = int(input())

for i in range(n):
    print('*', end=' ')
print()

if n % 2 == 0:
    for i in range(n-1):
        for j in range(n):
            if j % 2 == 0:
                print(' ', end=' ')
            else:
                if j-1 < i:
                    print(' ', end=' ')
                else:
                    print('*', end=' ')
        print()
else:
    for i in range(n-2):
        for j in range(n):
            if j % 2 == 0:
                print(' ', end=' ')
            else:
                if j-1 < i:
                    print(' ', end=' ')
                else:
                    print('*', end=' ')
        print()

첫 줄은 모든 값이 다 별을 출력하기 때문에 처음에 한 줄 출력해줬다.

두번 째 줄부턴 홀수는 공백을 짝수는 별을 출력하되 각 자리의 개수만큼 출력해야 하기 때문에 해당 줄보다 작은 위치는 공백처리를 해주었다. 좀 더 간단하게 코드를 짤 수 있을 것 같은데 처음부터 홀 짝을 나눠 출력해야 해서 길게 구현했다.

---

리액트의 라이프 사이클

리액트의 라이프 사이클은 컴포넌트가 생성되고 업데이트되며 소멸되는 과정을 말한다.

함수형 컴포넌트의 경우는 리액트 훅(React Hooks)인 useEffect 훅을 사용하여 라이프 사이클을 관리하고, 클래스 컴포넌트는 세 가지 주요 단계로 나눌 수 있다.

 

• 마운팅(Mounting): 컴포넌트가 DOM에 삽입될 때
• 업데이트(Updating): 컴포넌트의 상태(state)나 속성(props)이 변경될 때
• 언마운팅(Unmounting): 컴포넌트가 DOM에서 제거될 때

1. 마운팅(Mounting)

• constructor()
  • 컴포넌트가 처음 생성될 때 호출된다.
  • 상태 초기화와 인스턴스 메서드 바인딩에 주로 사용된다.
• static getDerivedStateFromProps(props, state):
  • 마운트 및 업데이트 시에 호출되며, 새로운 props에 따라 state를 갱신할 수 있다.
  • this를 사용하지 않고, 순수 함수로 작동한다.
• render():
  • JSX를 반환하여 컴포넌트의 UI를 정의한다.
  • 반드시 있어야 하며, 순수 함수로 작성해야 한다.
• componentDidMount()
  • 컴포넌트가 처음 마운트된 후에 호출된다.
  • DOM 조작이나 네트워크 요청 등의 부수 효과를 수행할 수 있다.

2. 업데이트(Updating)

• static getDerivedStateFromProps(props, state)
  • 마운팅 단계의 static과 동일하며, 마운트 및 업데이트 시 모두 호출된다.
• shouldComponentUpdate(nextProps, nextState)
  • 새로운 props 또는 state를 받았을 때 렌더링을 해야 하는지 여부를 결정한다.
  • 성능 최적화에 유용하며 기본적으로 true를 반환한다.
• render()
  • 마운팅 단계와 동일하며 JSX를 반환해 컴포넌트의 UI를 정의한다.
• getSnapshotBeforeUpdate(prevProps, prevState)
  • DOM이 실제로 업데이트되기 직전에 호출되는데, 이 메소드는 스크롤 위치 등의 값을 캡처할 때 유용하다.
  • 반환값은 componentDidUpdate에 전달된다.
• componentDidUpdate(prevProps, prevState, snapshot)
  • 컴포넌트가 업데이트된 후에 호출된다.
  • 이전의 props와 state, 그리고 getSnapshotBeforeUpdate에서 반환한 값을 인자로 받는다.

3. 언마운팅(Unmounting)

• componentWillUnmount()
  • 컴포넌트가 DOM에서 제거되기 전에 호출되며 타이머 정리, 네트워크 요청 취소 등의 정리 작업을 수행할 수 있습니다.