Chikong

State

: 값이 변하면 View를 새로 그려주는 역할을 수행

State 란 무엇인가?

1. State Property store values that the view depends on

⇒ 뷰가 의존하는 상태 속성 저장값

2. State Property represent values that can change

⇒ State Property는 변경할 수 있는 값을 나타냅니다.

3. State Property typically declared in the view that nedds them

⇒ State Property는 일반적으로 이를 추가하는 뷰에서 선언됩니다.

예제 코드

• State 속성을 사용한 toggleValue 의 변화에 따라 Text가 변하는걸 볼수 있다

Binding

: State의 값을 받아오거나 변경할 때 사용 ( View간 양방향 소통 )

$ 기호를 사용하여 속성을 정의한다

Binding이란 무엇인가?

1. Put a ‘$’ infront of a State Property reference in your view code (Not in the declaration) to turn it into a two way, Read/Write relationship

⇒ view 코드(선언 아님)에서 State Property 참조 앞에 '$'를 넣어 양방향 읽기/쓰기 관계로 전환합니다.

2. @Binding is a property wrapper to indicate that it expects a binding to be passed to the view when an instance of the view is created

⇒ @Binding은 뷰의 인스턴스가 생성될 때 뷰에 바인딩이 전달될 것으로 예상함을 나타내는 속성 래퍼입니다.

예제 코드

• State를 선언한 View

struct ParentView: View {
    @State private var toggleValue = true
    var body: some View {
        SubView(toggleValue: $toggleValue)
    }
}

• Binding으로 State변수를 받는 SubView

struct SubView: View {
    @Binding var toggleValue: Bool
    
    var body: some View {
        if toggleValue == false {
            Text("Toggle is False")
        } else {
            Text("Toggle is True")
        }
        
        Button(action: {
            self.toggleValue.toggle()
        }) {
            Text("토글 버튼")
        }
    }
}

• @Binding 을 명시함 으로써, State변수를 받아옴을 명시
• 부모 View 에서 Binding으로 값을 넘겨 줄때는 $ 기호를 사용

Observable Object

: 여러 View에서 의존하기를 원할때 사용하는 Object

Observable Object를 사용하기 위한 절차

1. Class가 Observable Object 프로토콜을 채택해야함
2. 프로토콜을 채택함으로써 변경하상에 대해 Class의 객체를 관찰하거나 수신
3. @Published를 선엄하여 변경사항을 저장할 속성을 명확하게 명시 ( Class 내의 개체에 명시 )
4. @Observed Object 속성을 사용하여 관찰가능한 개체에 대한 참조를 저장

예제 코드

• 여러 View에서 의존 할 Class 생성

class Profile: ObservableObject {
    @Published var isLogined = false
}

⇒ Class에 Observable Object를 채택

⇒ @Published 를 사용함 으로써 변하는 값을 감시할 변수 명시

struct LoginView: View {
    @ObservedObject var profile = Profile()
    
    var body: some View {
        if profile.isLogined {
        Text("로그인 완료")
        } else {
            Text("버튼을 눌러 로그인 해주세요")
        }
        
        Button(action: {
            profile.isLogined.toggle()
        }){
            Text("버튼")
        }
    }
}

⇒ @ObservedObject 를 사용함 으로써, 변경 사항을 감시할 개체 인스턴스 생성

하지만 이러한 방식을 사용하면 하위 View 모두에게 동일 인스턴스를 전달 할 수 없다 다음 예를 보자

버튼을 클릭하여 로그인을 하면, 로그인 사용자의 닉네임을 보여줄 것이다.

• LoginView

struct LoginView: View {
    @ObservedObject var profile = Profile()
    
    var body: some View {
        if profile.isLogined {
        Text("로그인 완료")
        } else {
            Text("버튼을 눌러 로그인 해주세요")
        }
        LoginCheckView()
        Button(action: {
            profile.isLogined.toggle()
        }){
            Text("버튼")
        }
    }
}

• LoginCheckView

struct LoginCheckView: View {
    @ObservedObject var profile = Profile()
    
    var body: some View {
        if profile.isLogined {
            Text("로그인한 사용자 : Chikong.")
        } else {
            Text("로그인 정보가 없습니다.")
        }
    }
}

코드를 작성하고 앱을 실행하면

• 하위 View의 값이 변하지 않는것을 확인 할 수 있다

이러한 현상이 나타나는 이유는 다음 그림을 살펴보자

• 다음과 같이 각 View에 새로운 Class 인스턴스를 생성 했기 때문에 각각 다른 인스턴스를 참조 하고 있다.
• 그렇기 때문에 두개의 인스턴스는 다른 것으로 인식하게 되고, 연관된 값을 변경 하거나 감시할 수 없다

EnvironmentObject

: 하위 View 모두에게 동일한 객체 인스턴스를 사용

위의 예시를 해결할 수 있는 방법이 EnvironmentObject 이다. EnvironmentObject를 사용하면 동일 인스턴스를 하위 View 모두에게 전달 할 수 있다.

위의 문제를 해결할 예제 코드를 보자

• MainView

import SwiftUI

@main
struct DataFlowApp: App {
    var body: some Scene {
        WindowGroup {
            LoginView()
                .environmentObject(Profile())
        }
    }
}

⇒ 제일 상위 Main View에서 .environmentObject(Profile()) 를 이용해 객체 인스턴스를 넘겨주었다. 이제 MainView의 하위 View에서 동일한 인스턴스를 참조할 수 있다.

• LoginView

struct LoginView: View {
    @EnvironmentObject var profile: Profile
    
    var body: some View {
        if profile.isLogined {
        Text("로그인 완료")
        } else {
            Text("버튼을 눌러 로그인 해주세요")
        }
        LoginCheckView()
        Button(action: {
            profile.isLogined.toggle()
        }){
            Text("버튼")
        }
    }
}

• LoginCheckView

struct LoginCheckView: View {
    @EnvironmentObject var profile: Profile

    var body: some View {
        if profile.isLogined {
            Text("로그인한 사용자 : Chikong.")
        } else {
            Text("로그인 정보가 없습니다.")
        }
    }
}

⇒ LoginView 와 LoginCheckView에 @EnvironmentObject var profile: Profile 부분을 보자.

@EnvironmentObject 속성을 명시 했고 같은 인스턴스를 참조함을 구체적으로 적어 주었다

⇒ 같은 인스턴스를 참조하기 때문에 로그인상태에 따라 값이 변함을 확인 할 수 있다.

이처럼 하위 View에 동일 인스턴스를 참조해야 할때, 필요한 View에 명시해주면 사용할 수 있다.

참고 유튜브 : https://www.youtube.com/watch?v=jD6c9y8CFGQ

문제

풀이 코드

let n = Int(readLine()!)!
var nums = readLine()!.split(separator: " ").map{Int(String($0))!}
var answer = [Int]()

for index in 0..<n {
    while !answer.isEmpty && nums[answer.last!] < nums[index] {
        nums[answer.removeLast()] = nums[index]
    }
    answer.append(index)
}

for index in answer {
    nums[index] = -1
}

print(nums.map{String($0)}.joined(separator: " "))

풀이 과정

혼자 해결하지 못한 문제였다.

처음 생각은 filter를 이용해 현재 인덱스의 값보다 작은것들만 모아놓고,

그렇게 생성된 배열이 비어있으면 -1을, 

비어있지 않으면 해당 배열의 첫번째 인덱스를 저장하면 될것 같았는데

애초에 그렇게 구현하지 못하는 문제였기도 했고, 가능하다 했어도 매번 filter를 사용해야 하기 때문에 시간초과에서 걸렸을것 같았다.

그래서 인터넷의 코드를 참고하여 이해하는 수준에 그쳤다..

너무 어려운 문제였다.

우선,

answer 배열에 -1이 들어갈 인덱스를 저장한다.

그리고 for 루프 내에서 while 루프를 돌려, 오큰수를 찾고, 오큰수를 찾지 못하면 해당 인덱스를 저장하여

마지막에 해당인덱스 요소를 -1 로 바꿔 주었다.

디버깅 

문제

풀이 코드

let inputs = readLine()!.map{String($0)}
var answer = 0
var stick = 0

for index in 0..<inputs.count {
    if inputs[index] == "(" {
        stick += 1
    } else {
        stick -= 1
        if inputs[index - 1] == "(" {
            answer += stick
        } else {
            answer += 1
        }
    }
}

print(answer)

풀이 과정

그림을 그려가며 규칙을 찾았다.

레이저를 만나면 막대의 수는 레이저 + 1개가 된다.

그렇게 생각하고 문제를 해결 하려 했는데 도저히 감이 안왔다.

그렇게 고민을 하다가 결국 검색을 통해 답을 보게 되었다.. ㅠㅠ

코드의 흐름대로 보면 다음과 같은 단계로 갯수를 셀 수 있다

1. '(' 를 만나면 막대의 수를 +1 한다.

2. ')'를 만나면 막대의 수를 -1 한다.

2 - 1. ')'를 만났을때 바로 전의 요소가 '('면 레이저를 만났다는 소리가 되고, 레이저를 만나면 현재까지 쌓인 막대의 수 만큼 저장된다

2 - 2 ')'를 만나고, 해당 요소가 레이저가 아니라면, 막대의 마지막 부분이기 때문에 잘린상태의 막대가 +1 된다 ( 레이저 + 1의 규칙이 여기서 적용 )

글로 설명이 어려울거 같아 그림도 같이 첨부하지만..

그림을 봐도 이해를 못할거 같다 이문제는 나중에 코드를 까먹었을때 다시 한번 스스로 풀어보는걸로..

문제

풀이 코드

let inputs = readLine()!
var noReverse = ""
var total = ""

for w in inputs {
    if w == "<" {
        noReverse.append(w)
        if !total.isEmpty {
            reversePrint(total, nil)
            total = ""
        }
    } else if w == ">" {
        noReverse.append(w)
        print(noReverse, terminator: "")
        noReverse = ""
    } else {
        if noReverse.first == "<" {
            noReverse.append(w)
        } else if w != " "{
            total.append(w)
        } else {
            reversePrint(total, " ")
            total = ""
        }
    }
}

if !total.isEmpty {
    reversePrint(total, nil)
}

func reversePrint(_ total: String, _ space: String?) {
    print(String(total.reversed()), terminator: space ?? "")
}

풀이 과정

고민을 많이 했던 문제였다.

처음에는 공백을 기준으로 나누고 단어에 '<' 나 '>' 가 포함되어 있으면 그대로 출력하고,

그렇지 않으면 reversed를 사용하여 뒤집어 출력하게 시도했다.

하지만 이렇게 하면

" <hel le>le <     dsa   >dlae "

이런 형식일때, 제대로 출력하지 못하게 되었고, 고민을 하다가 스택을 이용해서 요소 하나하나를 꺼내주고 < 와 >를 만날때 적절히 처리해야하나..? 고민을 했다.

그러다가 그냥 if 문을 사용하여 구현하기로 했다.

< 가 있다면 별도의 string 에 해당 문자를 넣어주고,

> 를 만나면 문자가 들어있는 문자열을 출력해주고 해당 문자열을 비워 주었다.

그렇지 않은 경우 또 다른 문자열에 넣어 주었고, " " 의 공백을 만나는 기점으로 반전하여 출력하고, 해당문자열을 비워 주었다.

그렇게만 하고 시도 했지만 틀렸다는 결과를 보았고,

< 를 만나기 전, 반전해야 하는 문자가 들어있는 문자열이 비워있지 않으면 반전시켜 출력하고 해당 문자열을 비워주어야 했고,

Loop 가 종료되는 시점에서도 해당 문자열에 문자요소가 남아있다면 비워주어야 했다.

Nano Challenge 를 진행하는데 횡 스크롤을 구현해야 해서 ScrollView를 공부해 보았다

공식문서 내용

스크롤 뷰는 스크롤 가능한 콘텐츠 영역 내에서 콘텐츠를 표시합니다. 사용자가 플랫폼에 적합한 스크롤 제스처를 수행할 때, 스크롤 보기는 기본 콘텐츠의 어떤 부분이 보이는지 조정합니다. ScrollView는 수평, 수직 또는 둘 다 스크롤할 수 있지만 줌 기능을 제공하지는 않습니다.

• 어..? HIG에는 적절한 줌 기능을 제공하라고 했는데..? 그건 페이지 컨트롤을 사용할때 한정인가보다.
• 아직까지는 줌 기능이 필요하지 않으니 추후에 스크롤과 줌 기능이 필요하면 그때 다시 찾아보자.
• 일단 기본적으로 ScrollView는 줌 기능을 제공하지 않음!

정의

struct ScrollView<Content> where Content : View

→ 정의를 보면 View를 반환하는 구조체로 되어있다.

이 말은 우리는 그냥 ScrollView{ ... return view } 의 형태로 구현하면 된다!

ScrollView 사용해보기

ScrollView() {
	VStack {
		ForEach (0..<20) { i in
			Text("\\(i)")
		}
	}
}

→ 결과

• ScrollView의 기본 Default 값은 vertical 이라는것을 알수 있다.
• 스크롤 뷰 내의 구성 요소들을 수직으로 정렬하기 위하여 VStack 에 요소를 넣어주고 구성하면 된다!
• 내가 필요한 것은 횡 스크롤 이므로 구성 요소를 HStack으로 구성하면 되려나?

ScrollView() {
	HStack {
		ForEach (0..<20) { i in
			Text("\\(i)")
		}
	}
}

→ 결과

응..? 뭔가 이상하다 스크롤도 안될 뿐더러 요소들이 아주 이상하게 배치되어 있다

• 횡 스크롤을 사용하려면 ScrollView 에 파라미터로 .horizontal 을 설정하자!

ScrollView(.horizontal) {
	HStack {
		ForEach (0..<20) { i in
			Text("\\(i)")
		}
	}
}

→ 결과

• 원하는 대로 동작이 나왔다

아!! 스크롤뷰는

• Default 값으로 수직 스크롤이 되는구나
• 횡 스크롤을 구성하려면 horizontal 을 넣어줘야 하는구나!
• 스크롤내의 요소들을 스크롤 방향에 따라 구성해야 하는구나!

라는 점을 배웠다

그런데 ScrollView의 컴포넌트 중에 showsIndicators 라는 것이 있다. 이게 뭔가 찾아볼까 하다가 직접 해보며 익히는게 좋을거같아 차이를 확인해 봤다

showsIndicators = true

ScrollView(.horizontal, showsIndicators = true) {
	HStack {
	ForEach (0..<20) { i in
		Text("\\(i)")
		}
	}
}

→ 결과

⇒ 변한게 없다..? 그럼 false 도.. 확인해보자

showsIndicators = false

ScrollView(.horizontal, showsIndicators = fasle) {
	HStack {
		ForEach (0..<20) { i in
			Text("\\(i)")
		}
	}
}

→ 결과

⇒ 아! 차이가 보인다

HIG에 명시되어 있는 스크롤 표시기가 이 내용인가 보다!

스크롤이 되었을때, 인디케이터가 표시된다 현재 스크롤이 어느지점쯤에 있는지 보여준다!

정리

• showsIndicators 는 스크롤 진행 표시기? 정도로 이해하면 될거같다
• 기본 default값으로 true 가 설정된다
• false를 설정하면 표시기를 없앨 수 있다

ScrollView를 적용한 결과

아. 뿌듯. 이상.